Добавление данных html при выборе элемента в списке выбора html - PullRequest
Новая
       16

Добавление данных html при выборе элемента в списке выбора html

1 голос
/ 30 апреля 2010

У меня есть селектор, который может выглядеть так: 

<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>");

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

Ответы [ 3 ]

0 голосов
/ 30 апреля 2010

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

// 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-строки, что позволяет мне писать двойные кавычки без необходимости экранировать их. Это улучшает читаемость кода:)

0 голосов
/ 30 апреля 2010

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

<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>
0 голосов
/ 30 апреля 2010

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

...