当HTML选择列表项中选择

追加HTML数据我有一个选择可能看起来像这样的：当HTML选择列表项中选择

<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。如果它们未被选中，则需要再次移除输入字段。我还需要检索从选择列表中的期权价值将其添加为在添加输入字段标识......

来源

2010-04-30 Workoholic

当选择一个条目，我想补充一类如“选择” 然后您可以根据所有具有“selected”类的条目设置＃fieldcontainer的innerHtml。

来源

2010-04-30 13:18:18 derek

你可以做一些沿着这些路线：

// 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的字符串，它让我写双引号不必转义。它提高了代码的可读性:)

来源

2010-04-30 14:29:26 Jakob

谢谢！我无法检查元素是否被选中。你的例子会帮助我很多！ :-) – Workoholic 2010-04-30 15:19:15

编辑：嗯...我试过了，但部分是div容器被删除永远不会执行。我也可以以某种方式获取选择列表中的所有元素，并循环遍历它们以删除未选中的项目。但是名单可能会变得很长！这将花费太多时间。 – Workoholic 2010-04-30 15:33:17

另外，在首页加载时，需要显示连接到已经选择的项目的容器。 – Workoholic 2010-04-30 15:50:14

这里是我想出的解决方案。如果有更优雅的方式，请告诉我。 :-)

<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>

来源

2010-04-30 17:08:07 Workoholic

当HTML选择列表项中选择

回答

相关问题