Question

我有2 select boxes。我需要做的是：当1st select option我选择启用2nd select options然后选择选项时，它会将其自我广告到ol li列表并禁用该选项。当我点击li时，li应该会消失，并且应该启用第二个选择框上的选项。

<div class="styleSelect">
    <select class="units" id="select">
        <option value="1">Sve ponude</option>
        <option value="2">1</option>
        <option value="3">2</option>
    </select>
</div>
<div class="styleSelect">
    <select class="units" id="change">
        <option value="1" disabled="disabled" selected="selected">Sve ponude</option>
        <option value="2">1</option>
        <option value="3">2</option>
    </select>
</div>
<div>
    <ol>
    </ol>
</div>

jquery的：

                function getText(){
                $('#change').on('change',function(){
                    $(".value_change").prop('value', 'Potvrdi');
                    $("#close").css('display', 'none');
                    conceptName ='<li>' + $('#change').find(":selected").text() + ' ( ' + $('#select').find(":selected").text() + ' ) <a  class="speclist-remove"></a></li>';
                    $('ol').append(conceptName);    
                    $('#change').on('change',function(){
                        if($(this).val()){
                            $(this).prop("disabled",true);
                        }
                    });
                        $(".speclist-remove").on("click", function(){
                            $(this).closest("li").remove();
                            alert($(this).closest("li").text());
                        });

                });     
            }

Answer 1

不太确定是否正确，请尝试此示例用法：

<强> HTML

<div class="styleSelect">
  <select class="units" id="select">
    <option value="1">Sve ponude</option>
    <option value="2">1</option>
    <option value="3">2</option>
  </select>
</div>
<div class="styleSelect">
<select class="units" id="change">
    <option value="1" disabled="disabled" selected="selected">Sve ponude</option>
    <option value="2">1</option>
    <option value="3">2</option>
</select>
</div>
<div>
 <ol></ol>
</div>

<强> JS

$(document).on('change', '#select', function(){    
  var val = $(this).val();
  $('ol').append('<li>'+val+'</li>');
  $('#change option[value="'+val+'"]').prop('disabled', true);    
});

$(document).on('click','ol li',function(){
  var val = $(this).text().trim();
  $(this).remove();
  $('#change option[value="'+val+'"]').prop('disabled', false);
});

DEMO

禁用选择选项

1 个答案: