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

Question

Учитывая этот HTML: код Я хотел бы, чтобы выбор b в Select d1 привел к тому, что вариант 2 в select r1 не будет доступен (удален). Но если страница обновляется или в d1 выбрана любая другая опция, все опции в r1 должны быть доступны.

Возможно ли это с Jquery? http://jsfiddle.net/dwvYY/6/

Одна из первых проблем, с которыми я сталкиваюсь, заключается в том, что я не могу связать выбор со свойством title, которое мой клиентский инструмент (SharePoint помещает в теги Select).

Спасибо.

Answer 1

Вы можете отключить параметр по индексу или скрыть его.Вот мое решение: http://jsfiddle.net/PabZk/

Выбор опций по индексу был бы хорошей идеей в больших списках.

Answer 2

Может быть, этот фрагмент кода даст вам подсказку, как его реализовать, вам следует рассмотреть возможность использования оператора switch intsted.

Если вы выберете b, номер 3 будет отключен в другом списке выбора, посмотритена этой скрипке: http://jsfiddle.net/dwvYY/7/

$("select[title$=d1]").change(function (){
    // Reset the options:
    $("select[title$=r1]").children("option").removeAttr("disabled","disabled")
    var selectedValue = $(this).val();
    if(selectedValue =="b"){

        // This will disable one option            
        $("select[title$=r1]").children("option[value='3']").attr("disabled","disabled")
    }
})
​

Answer 3

$(function(){

    $("select[title=d1]").change(function(){

       if($(this).val()=="b")
       {
           $("select[title=r1] option[value='2']").remove();
       }          
       else
       {
              $("select[title=r1] option[value='2']").remove();               
              $("select[title=r1] option[value='1']").after($("<option></option>").attr("value","2").text("2"));
       }               
    });        
})​

Рабочий образец: http://jsfiddle.net/r34Kd/9/

Answer 4

Вы можете просто показать / скрыть необходимую опцию при условии change события элемента select.Попробуйте это.

var $selectr1 = $('select[title=r1]');
$('select[title=d1]').change(function(){
    $selectr1.find("option").show();
    if(this.value == "b"){
        $selectr1.find("option[value='2']").hide();
    }
});

Рабочая демонстрация - http://jsfiddle.net/dwvYY/8/

Answer 5

Вам необходимо прослушать событие change для динамического изменения значений:

$('select[title="rl"]').change(function() {
  var $this = $(this);
  var options = $('' + $this + ' option');
  options.each(function() {
    // perform actions on each option value
  });
});

Answer 6

Это должно ответить на оба ваших вопроса. Во-первых, в вашем jsFiddle ваш код выполнялся в заголовке документа вместо onLoad или onDOMready. Во-вторых, этот код должен делать то, что вы просили, в части удаления «2» из второго списка, когда «b» выбрано из первого:

Пример jsFiddle .

JQuery:

$('select[title$=r1] option:eq(0)').text("Please Select").val("");
$('select[title$=d1] ').click(function() {
    if ($(this).val() == 'b') {
        $('select[title$=r1] option[value="2"]').remove();
    }
});​