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

我可以轻松添加点击处理程序以显示这些表单字段。但是，我如何跟踪已添加的表单字段？选择多个字段时，需要将适当数量的输入字段添加到fieldcontainer div。如果未选中它们，则需要再次删除输入字段。我还需要从选择列表中的选项中检索值，以便在添加的输入字段中将它们添加为标识符...

Answer 1

当选择一个条目时，我会添加一个类，例如“selected” 然后，您可以根据所有具有“已选择”类的条目设置#fieldcontainer的innerHtml。

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-string使用单引号，这允许我编写双引号而不必转义它们。它提高了代码的可读性：）

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>

选择html选择列表中的项目时附加html数据

3 个答案: