隐藏第二个下拉列表中的第一个下拉列表选定文本

时间:2018-05-09 07:20:51

标签: javascript jquery html dropdown

我需要根据文本而不是值来更改,因为值不同。所以任何人都可以帮助我。

$("#primary_supplier").change(function () {
    var selectedText = $(this).find("option:selected").text();
    var selectedValue = $(this).text();
    var optionValues = [];
    $('#secondary_supplier option').each(function () {
        optionValues.push($(this).text());
    });
    optionValues.toString();
    console.log(optionValues);
    if ($.inArray(selectedText, optionValues) != '-1') {
        var others = $("#secondary_supplier option[value=" + selectedText + "]");
        $("#secondary_supplier option[selectedText]").css("display", "none");
        $("#secondary_supplier :not(option[value=" + selectedText + "])").css("display", "block");
    }
});

1 个答案:

答案 0 :(得分:1)

这可能对您有所帮助



$(function() {
    $("#primary_supplier").change(function() {
        loadSecondDropdown(this);
    });
    
});
function loadSecondDropdown(ele){
  var sele=$('option:selected', ele).text();
  $("#secondary_supplier").val('default');      
  $('#secondary_supplier option').show();
  $('#secondary_supplier option').each(function () {           
    if(sele==$(this).text()){
      $(this).hide();
    }           
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Primary
</label>
<select id="primary_supplier" name="projectKey">    
    <option value="default">--select--</option>
    <option value="p1">supplier 1</option>
    <option value="p2">supplier 2</option>
    <option value="p3">supplier 3</option>
    <option value="p4">supplier 4</option>
</select>
<label>Secondary
</label>
<select id="secondary_supplier" name="projectKey">
    <option value="default">--select--</option>
    <option value="s1">supplier 1</option>
    <option value="s2">supplier 2</option>
    <option value="s3">supplier 3</option>
    <option value="s4">supplier 4</option>
</select>
&#13;
&#13;
&#13;