javascript - 仅选择未选择的组合框 jquery

Question

带有组合框生成功能的代码(运行良好)

<script>
$('#combos').on('change', '.combo', function() {
var selectedValue = $(this).val();

if (selectedValue !== '' && $(this).find('option').size() > 2) {
var newComboBox = $(this).clone();
var thisComboBoxIndex = parseInt($(this).attr('data-index'), 10);
var newComboBoxIndex = thisComboBoxIndex + 1;
$('.parentCombo' + thisComboBoxIndex).remove();

newComboBox.attr('data-index', newComboBoxIndex);
newComboBox.attr('id', 'combo' + newComboBoxIndex);
newComboBox.addClass('parentCombo' + thisComboBoxIndex);
newComboBox.find('option[value="' + selectedValue + '"]').remove();
$('#combos').append(newComboBox);
}
});</script>

html 和 php(运行良好)

<form id="myForm">
<div id="combos"><select id="combo1" class="combo" data-index="1">
<option></option>
<?php
while($r = mysql_fetch_array($result))
{
echo "<option value=\"" .$r['id'] . "\">".$r['field'] ." ------</option>";
}
?>
</select>
</div>
<input type="button"  id="button_submit" value="Show">
</form>

此代码应仅选择未选择的组合框。但不工作。我认为仅适用于函数找到的第一个非选定值。 Please see image

<script>
$('#button_submit').click(function() 
{

var combo_box_values = $('#combo1 option:not(:selected)').map(function () 
{
return parseInt(this.value);
}).get();

});
</script>

问:可以吗？我的代码在哪里丢失？

干杯

编辑:源代码

<h4>Data Options</h4></center>
<div id="combos"><select id="combo1" class="combo" data-index="1">
<option></option>
<option value="1">uptime ------</option>
<option value="2">score ------</option>
    <option value="3">gender ------</option>
<option value="4">age ------</option>
    <option value="5">angry ------</option>
<option value="6">happy ------</option>
    <option value="7">sad ------</option>
<option value="8">surprised ------</option>
    <option value="9">location ------</option></select>
    <select id="combo2" class="combo parentCombo1" data-index="2">
    <option></option>
    <option value="1">uptime ------</option>
    <option value="2">score ------</option>
    <option value="4">age ------</option>
    <option value="5">angry ------</option>
    <option value="6">happy ------</option>
    <option value="7">sad ------</option>
    <option value="8">surprised ------</option>
<option value="9">location ------</option></select>
    <select id="combo3" class="combo parentCombo1 parentCombo2" data-index="3">
    <option></option>
    <option value="1">uptime ------</option>
    <option value="4">age ------</option>
    <option value="5">angry ------</option>
    <option value="6">happy ------</option>
    <option value="7">sad ------</option>
    <option value="8">surprised ------</option>
    <option value="9">location ------</option></select>
    <select id="combo4" class="combo parentCombo1 parentCombo2 parentCombo3" data-index="4">
    <option></option>
    <option value="1">uptime ------</option>
    <option value="5">angry ------</option>
    <option value="6">happy ------</option>
    <option value="7">sad ------</option>
    <option value="8">surprised ------</option>
    <option value="9">location ------</option></select></div>

Answer 1

我认为选择器的主要部分提供 .map()需要是#combos而不是#combo1如果您想检查所有<select>中所有未选择的选项元素。例如，

var combo_box_values = $('#combos option:not(:selected)').map(function() {
    return parseInt(this.value);
}).get();

编辑:根据评论中的反馈和更新的问题，这可能对您有用，但我确信存在更好的解决方案，因为这只是感觉笨重。

$('#button_submit').click(function() {
  var combo_box_values = $('#combos .combo').filter(function() {
    return this.selectedIndex === 0;
  }).map(function () {

    return $('option:not(:selected)', this).map(function() {
      return parseInt(this.value);
    }).get();
  }).get();

  console.log(combo_box_values);
  return false;
});

我认为要理解的关键部分是 .filter() 其中不包括 <select>用户已经选择了一个选项，只留下那些没有选择的选项。从这里开始，就是找到所有未选中的选项并提取 value 属性的情况。

如果您想要选择选项，您可以使用 $('option', this)而不是$('option:not(:selected)', this)在上面的代码中。

在 the demo这应该显示 2,3,4,5,6,7,8,9如果在第一个<select>中选择了正常运行时间和1,2,3,4,5,6,7如果在第一个中选择惊讶，在第二个中选择位置。

希望这有帮助!