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()た s を除外し、選択されていないものだけを残すことだと思います。<select>そこから、選択されていない選択肢をすべて探し出し、値属性を抽出するケースです。

選択したオプションが必要な場合は、上記のコードの$('option', this)代わりに使用できます。$('option:not(:selected)', this)

デモでは、最初にアップタイムが選択された場合、最初2,3,4,5,6,7,8,9に驚いた場合、2 番目に場所が選択された場合に表示されます。<select>1,2,3,4,5,6,7

お役に立てれば！

于 2012-11-27T14:21:00.857 に答える