удалить и добавить опцию окна выбора, если другие изменения выбора - PullRequest
Новая
       18

удалить и добавить опцию окна выбора, если другие изменения выбора

0 голосов
/ 02 апреля 2012

У меня есть 3 поля выбора, и все они имеют одинаковое значение (клоны) и созданы при изменении выбора справочной таблицы. теперь я хочу управлять выделением в трех раскрывающихся списках «Ограничение», чтобы оно «не отображало выбранное в двух других» и пользователь не мог выбрать одно из двух. как это сделать в jquery?

enter image description here

Код - 

<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. заранее спасибо.

Ответы [ 3 ]

2 голосов
/ 02 апреля 2012

Обновлено до улучшенного решения!

Надеюсь, это поможет, это очень простая демонстрация, которая нуждается в нескольких корректировках, но она должна сработать! http://jsfiddle.net/BUuZv/2/

0 голосов
/ 18 декабря 2015

Я обновил код. Это то, что вы ищете 

$('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/

0 голосов
/ 02 апреля 2012

Если я вас правильно понимаю, у вас есть <option> элементы с одинаковым значением в каждом <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/

...