1

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

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

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

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

1 回答 1

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>用户已选择选项的 s ，只留下未选择的那些。从那里，找到所有未选择的选项并提取 value 属性的情况。

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

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

希望这可以帮助！

于 2012-11-27T14:21:00.857 回答