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

Question

我需要更改基于文本的值，而不是值，因为值不同。所以可以请任何人帮助我。

$("#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");
    }
});

Answer 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>