0

3つの選択ボックスがあり、すべて同じ値（クローン）であり、参照テーブルの選択を変更すると作成されます。ここで、3つの[制約]ドロップダウンで選択を管理して、「選択したものを他の2つに表示しない」ようにし、ユーザーが2つから同じものを選択できないようにします。jqueryでそれを行う方法は？

ここに画像の説明を入力してください

コードは-

<tr>
<td> Reference Table:</td>
<td>
   <select id="tableCombo" onchange="jQuery.ajax({type:'POST',data:'tableCombo=' +        this.value, url:'/GryphonMonitor   /load/getColumns',success:function(data,textStatus)   {jQuery('#columns').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown)    {},complete:function(XMLHttpRequest,textStatus){LoadSelects();}});" name="tableCombo">
  </td>
  </tr>
  <tr id="cons">
<td nowrap=""> Constraint On: </td>
<td nowrap="">
<select id="columns" onchange="colChange(this);" name="columns">
<option value="CountryCode">CountryCode</option>
<option value="Date">Date</option>
<option value="Number">Number</option>
<option value="Type">Type</option>
</select>
</td>
<td  nowrap=""> Constraint Value: </td>
<td  nowrap="">
 </tr>
<tr id="cons1">
<td> Constraint On: </td>
<td>
<select id="columns2" onchange="colChange(this);" name="columns2">
<option value="CountryCode">CountryCode</option>
<option value="Date">Date</option>
<option value="Number">Number</option>
<option value="Type">Type</option>
 </select>
</td>
<td> Constraint Value: </td>
<td>
 </tr>
 <tr id="cons2">
   <td> Constraint On: </td>
  <td>
  <select id="columns3" onchange="colChange(this);" name="columns3">
<option value="CountryCode">CountryCode</option>
<option value="Date">Date</option>
<option value="Number">Number</option>
<option value="Type">Type</option>
</select>
</td>
<td> Constraint Value: </td>
<td>
  </tr>

JS関数はここにあります-

 function LoadSelects()
{
$("#columns2, #columns3").html( $("#columns").html()).val('') ;
}
  ///I  am trying to do thru this menthod but does not look good. here looking for help.


function getArray()
{
   var selectElement = [];  
  $('#columns option').each(function() {
 selectElement.push($(this).val())
 });
return selectElement;      
}  

 function colChange(col){
selectElements = getArray();
var $this = col;
for (i = 1; i < selectElements.length; i++)
{
     if(col.value == selectElements[i]){
   if(col.name == 'columns'){
  $('#columns2').find('option[value=' + selectElements[i] + ']').remove();
$('#columns3').find('option[value=' + selectElements[i] + ']').remove();
         }
else if(col.name == 'columns2'){
$('#columns').find('option[value=' + selectElements[i] + ']').remove();
$('#columns3').find('option[value=' + selectElements[i] + ']').remove();
             }
else if(col.name == 'columns3'){
$('#columns').find('option[value=' + selectElements[i] + ']').remove();
$('#columns2').find('option[value=' + selectElements[i] + ']').remove();
             }

     }

経験豊富なjquery開発者にとっては簡単なことだと思います。前もって感謝します。

4

3 に答える 3

2

改善されたソリューションに更新されました！

これがお役に立てば幸いです。これは非常に基本的なデモであり、いくつかの調整が必要ですが、うまくいくはずです。 http://jsfiddle.net/BUuZv/2/

于 2012-04-02T15:50:02.520 に答える
0

私があなたを正しく理解しているなら、あなたは<option>それぞれに同じ値を持つ要素を持っていて、要素の1つが選択されたとき<select>に他の各要素の選択を無効にしたいでしょう。これが私がそれをどのように行ったかを示す小さなスニペットです：<select><option>

HTML

<select class="hello">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="A">A</option>
</select>
<select class="hello">
    <option value=""></option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="B">B</option>
</select>
<select class="hello">
    <option value=""></option>    
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="C">C</option>
</select>

jQuery

$(document).ready(function () {
    $('select.hello').change(function () {
        $('select.hello option').attr('disabled', false);
        $('select.hello').each(function() {
            var val = $(this).find('option:selected').val();
            if (!val) return;
            $('select.hello option').filter(function() {
                return $(this).val() == val;
            }).attr('disabled', 'disabled');
        });
    });
});

そしてここにjsFiddleへのリンクがあります：http：//jsfiddle.net/yLCVf/1/

于 2012-04-02T15:33:03.300 に答える
0

コードを更新しました。これはあなたが探しているものです

$('select').change(function() {
  if ($(this).val() == 'other') {
    $('#select1, #select2, #select3').not(this)
      .children('option[value="other"]')
      .remove()
  } else {
    if ($('#select1, #select2, #select3').not(this).find('option[value=other]').length > 0) {

    } else {

      ($('#select1, #select2, #select3').not(this)
        .append('<option value="other">Other</option>'))
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1" name="select1">
  <option>No Match</option>
  <option value="1">Test</option>
  <option value="2">Test 2</option>
  <option value="other">Other</option>
</select>

<select id="select2" name="select2">
  <option>No Match</option>
  <option value="1">Test</option>
  <option value="2">Test 2</option>
  <option value="other">Other</option>
</select>
<select id="select3" name="select3">
  <option>No Match</option>
  <option value="1">Test</option>
  <option value="2">Test 2</option>
  <option value="other">Other</option>
</select>

http://jsfiddle.net/dZqEu/2003/

于 2015-12-18T20:25:57.607 に答える