javascript - 根据 Dropdown 的值禁用 DropDown 的两个选项

Question

我有一个脚本如下:

var i = 0;
    function add_relation()
    {
        i = i + 1;
        var key = $('<select />', {
                                 'class'  : 'relation-select',
                                 'id'     : 'key_' + i,
                                 'name'   : 'key[]'
                             });
        var condition = $('<select />', {
                                 'class'  : 'relation-select',
                                 'id'     : 'condition_' + i,
                                 'name'   : 'condition[]'
                             });

        var constraint = $('<input />', {
                                 'class'  : 'relation-input',
                                 'id'     : 'constraint_' + i,
                                 'type' : 'text',
                                 'name'   : 'constraint[]',
                                 'data-provide' : 'typeahead',
                                 'data-items' : '2'
                             })                  
        var butt = $('<buton />', 
                        {
                        'class' : 'btn',
                        'id' : 'btn_'+i,
                        'name' : 'btn[]',
                        'value': 'X'});
        var left = $('<div />', {'class' : 'relation-left','id' : 'relation_' + i});
        var right = $('<div />', {'class' : 'relation-right'});
        var parent = $('<div />', {'class' : 'relation-parent_' + i});          

        $(key).append('<option value="">Select Key</option><option value="product_title">Title</option><option value="type">Type</option><option value="product_price">Price</option><option value="product_weight">Weight</option>');

        $(condition).append('<option value="">Select Condition</option>'+
                                                        '<option value="is_equal_to">Is Equal To</option>'+
                                                        '<option value="is_greater_than">Is Greater Than</option>'+
                                                        '<option value="is_less_than">Is Less Than</option>'+
                                                        '<option value="starts_with">Starts With</option>'+
                                                        '<option value="ends_with">Ends With</option>'+
                                                        '<option value="contains">Contains</option>');  

        $(butt).click(function()
                        {
                           var id = this.id;
                           var res = id.split("_");
                           var index = res[1];
                           $(key).remove();
                           $(condition).remove();
                           $(constraint).remove();
                           $(butt).remove();
                           $(left).remove();
                           $(right).remove();
                           $(parent).remove();
                           i = i - 1;
                        });                     

        $(left).append(key).append(condition).append(constraint);

        $(right).append(butt);                                              

        $(parent).append(left).append(right);

    $("#relation_container").append(parent);
    }

现在您可以看到两个下拉菜单正在动态生成..

现在我想要一个函数，根据下拉“键”的值，将禁用下拉“条件”的两个选项

我怎样才能实现这一目标？

Answer 1

您可以绑定(bind)按键下拉列表的更改事件并禁用相应的条件选项 -

    $(documen).on('change','select[id^=key_]',function(){
          var selectedKey= $(this).val();

          var idIndex = $(this).attr('id').replace('key_','');
          var $conditionSelectBox = $(document).find('#condition_'+idIndex);

         // check if selected key is product title or type
          if(selectedKey=="product_title" || selectedKey=="type")
         {
           // disable option with values 'is_greater_than' and 'is_less_than'
$conditionSelectBox.find('option[value="is_greater_than"]').attr('disabled',true);
$conditionSelectBox.find('option[value="is_less_than"]').attr('disabled',true);
         }
         else
        {
          // enable all options again
          $conditionSelectBox.find('option').removeAttr('disabled');
        }         
      });