Question

使用combobox生成函数的

代码（运行良好）

<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

如果你想检查 all 未选择的选项，我认为选择.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>，只留下那些尚未选择的选项。从那里，可以找到未选择的所有选项并提取值属性。

如果您需要选定的选项，则可以在上面的代码中使用$('option', this)代替$('option:not(:selected)', this)。

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

希望这有帮助！

仅选择未选择的组合框jquery

1 个答案: