добавляющих HTML данных, когда элемент в HTML список выбора выбран

Question

У меня есть селектор, который может выглядеть следующим образом:

<label for="testselector">Test</label><br /> 
<select id="testselector" name="test[]" size="5" multiple="multiple"> 
    <option name="test_1" value="1">Test Entry X</option> 
    <option name="test_3" value="2">Test Entry Y</option> 
    <option name="test_5" value="5">Test Entry Z</option> 
</select> 

<div id="fieldcontainer"></div> 

При выборе записи из указанных полей, я хочу два поля формы, чтобы появиться. Я использую jquery, чтобы добавить их:

$("#fieldcontainer").append("<div><label for=\"testurl\">Test Url</label><br /><input name=\"testurl[]\" type=\"text\" id=\"testurl_1\" value=\"\" /></div>"); 
$("#fieldcontainer").append("<div><label for=\"testpath\">Test Path</label><br /><input name=\"testpath[]\" type=\"text\" id=\"testpath_1\" value=\"\" /></div>"); 

Я могу легко добавить обработчик кликов, чтобы эти поля формы отображались. Но как бы я отслеживал, какие поля формы уже были добавлены? Когда выбрано несколько полей, соответствующее количество полей ввода должно быть добавлено в поле div контейнера. И если они не выбраны, поля ввода должны быть снова удалены. Мне также нужно получить значение из опций в списке выбора, чтобы добавить их в качестве идентификатора в добавленные поля ввода ...

Answer 1

Когда запись выбрана, я бы добавил класс, такой как «выбрано» Затем вы можете установить innerHtml # fieldcontainer на основе всех записей с классом «selected».

Answer 2

Вы могли бы сделать что-то вдоль этих линий:

// For each of your options 
$("#testselector option").each(function(i, option) { 

    // Create a function that shows/hides the current option 
    var showHide = function() { 

    // Find the value of the clicked option 
    var value = $(option).val(); 

    // Create an id that we can use for adding/removing the new html 
    var uid = "someuniquename_" + value; 

    // Check if the option is selected or unselected 
    // Based on that, either create or remove desired html 
    if ($(option).attr('selected')) { 
     $("#fieldcontainer").append('<div id="' + uid + '">your html here, from id ' + value + '...</div>'); 
    } else { 
     $("#fieldcontainer div#" + uid).remove(); 
    } 
    }; 

    // Invoke showHide once right now, to initialize the page 
    showHide(); 

    // Invoke showHide when the option is clicked 
    $(option).click(showHide); 
}); 

Также обратите внимание, что я использую одинарные кавычки для HTML-строки, что позволяет мне писать двойные кавычки, не имея, чтобы избежать их. Это улучшает читаемость кода :)

Answer 3

Здесь решение, которое я придумал. Если есть более элегантный способ, дайте мне знать. :-)

<script type="text/javascript"><!-- 
$(document).ready(function(){ 
    function changeVals() { 
     var values = $("#testselector").val() || []; 

     $.each(values, function(key, value) { 

      if(!$("#testurl_"+value).length){ 
      //add field 1 
      $("#fieldcontainer").append("<div id='testurl_"+value+"'><label>Test URL</label><br /><input name='testurl' type='text' value='...' /></div>"); 
      } 
      if(!$("#testpath_"+value).length) 
      { 
      //add field 2 
      $("#fieldcontainer").append("<div id='testpath_"+value+"'><label>TEST PATH</label><br /><input name='testpath' type='text' value='...' /></div>"); 
        } 
     }); 

     //remove all not selected fields 
     var preg = ''; 
      $.each(values, function(k, v) { 
       preg = preg + " #testurl_"+v + ","; 
       preg = preg + " #testpath_"+v + ","; 
      }); 
      //remove trailing comma 
      preg = preg.slice(0,preg.length-1); 
      $("#fieldcontainer > :not("+preg+")").remove(); 

     } 
     $("#testselector").change(changeVals); 
     changeVals(); 
}); 
//--> 
</script>