jQuery .append选项到原始位置

我有以下简单的HTML代码，其中2个SELECT表单具有相同的选项值：

 None  Toyota Nissan   Honda     Toyota Nissan   Honda     Toyota Nissan   Honda   

我正在编写一个应该执行以下操作的jQuery脚本：如果在#first选择中我选择除“none”之外的任何值，fe Toyota，它将自动从#second选择中消失：

  None Nissan  

此外，如果我在#second选择中选择日产（假设#first仍然选择丰田），它应该自动从#first选择中消失：

  Toyota None  

最后，当我以任何选择forms将选择器重置为“无”时，它应该在同一位置的另一个选择中重新创建该选项。

我知道如何删除并追加删除到选项列表的末尾，问题是如何将删除的选项附加到之前的位置？

我使用以下jscript删除追加选项：

 $(document).on('change','#first', function() { fsel = $(this).attr('id'); fval = $(this).val(); ftext = $(this).children('option:selected').text(); if (fval === "none" ) { $("#second").append(''+firsttext+''); } else if ( typeof firstval != 'undefined' && fval != firstval) { $("#second").append(''+firsttext+''); $("#second option[value="+fval+"]").remove(); firstval = fval; firsttext = ftext; } else { firstval = fval; firsttext = ftext; $("#second option[value="+fval+"]").remove(); } }); $(document).on('change','#second', function() { ssel = $(this).attr('id'); sval = $(this).val(); stext = $(this).children('option:selected').text(); if (sval === "none" ) { $("#second").append(''+secondtext+''); } else if ( typeof secondval != 'undefined' && sval != secondval) { $("#second").append(''+secondtext+''); $("#second option[value="+sval+"]").remove(); secondval = sval; secondtext = stext; } else { secondval = sval; secondtext = stext; $("#second option[value="+sval+"]").remove(); } }); 

PS。 请不要提供.hide / .show – 它在某些浏览器中不起作用。

Answer 1

基本上你需要记住所有选项，我重新编写代码，希望它可以有所帮助。

  var sel1 = $('#first'), sel2 = $('#second'); //get the options value/text of some selection /** * get the options value/text map of some select element * * @param sel * a select element * * * @return {val1:txt1, val2:txt2....} */ function getSelOptions(sel) { var opts = {}, tmp; for ( var i = 0, len = sel.options.length; i < len; i++) { tmp = sel.options[i]; opts[tmp.value] = tmp.text; } return opts; } /** * Reset the select element's options * * @param sel * the select element * @param newOptions * the new options map * @param except * the option value which will be excluded */ function setOptionsExcept(sel, newOptions, except) { //remember the current select value var curSel = sel.options[sel.selectedIndex].value; //clear the select options sel.options.length = 0; for ( var k in newOptions) { //this one should be excludeed if (k != "none" && k == except) continue; //add to the option list sel.options.add(new Option(newOptions[k], k, false, k == curSel)); } } //remember the options map var opts1 = getSelOptions(sel1.get(0)), opts2 = getSelOptions(sel2.get(0)); sel1.change(function() { //sel1 value var val = $(this).val(); if (val == "none") { //as sel1 is none, reset sel1 setOptionsExcept(this, opts1); } //reset sel2, but no sel1 value setOptionsExcept(sel2.get(0), opts2, val); }); sel2.change(function() { //sel2 value var val = $(this).val(); if (val == "none") { //as sels is none, reset sel2 setOptionsExcept(this, opts2); } //reset sel1, but no sel2 value setOptionsExcept(sel1.get(0), opts1, val); }); 

http://jsfiddle.net/rooseve/PGqv7/3/

Answer 2

你可以使用jQuery post（）和一些PHP来做到这一点。 首先通过在HTML中放置占位符来从代码中分离数据：

文档准备就绪后的第一件事：初始化占位符

 $(document).ready(function() { $.get("init_first_select.php", function(response) { $("#first_select").html(response); }); $.get("init_second_select.php", function(response) { $("#second_select").html(response); }); }); 

在init_first_select.php中，您调用数据库并获取第一个选择框的数据，排列它并返回HTML代码，如下所示：

  None Toyota Nissan  

然后使用change（）和post（）来响应用户选择：

 $('#first').change(function() { var data = $("#formname").serialize(); $.post("update_second_select.php", data, function(response) { $("#second_select").html(response); }); }); 

在PHP文件中，您处理数据并为每个数据返回HTML-Code，然后将其插入#second_select占位符。 您可以使用PHP中的所有数组操作函数来执行您需要的任何操作。

这同样适用于第二个选择框：

 $('#second').change(function() { var data = $("#formname").serialize(); $.post("update_first_select.php", data, function(response) { $("#first_select").html(response); }); }); 

当然，您可以在一个PHP文件中完成所有数据处理。 😉