當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選擇列表項中選擇

回答

相關問題