Question

是否可以在jQuery中检查其他<select>是否正在尝试选择已选择的选项。

<select id="question1">
  <option>questionaire_1</option>
  <option>questionaire_2</option>
  <option>questionaire_3</option>
</select>

<select id="question2">
  <option>questionaire_1</option>
  <option>questionaire_2</option>
  <option>questionaire_3</option>
</select>

如果用户选择了questionaire_1中的#question1，然后又尝试在#question2中再次选择它，那么他应该无法再选择alert已经选中。

我有很多选择。它必须比较所有。我不知道怎么做这个TYIA。

UPDATE1：也许他们投票了，因为它令人困惑，但事情是选择，它的内容都是动态的，可以让数百人选择..我的道歉

Answer 1

试试这个：

＆＃13;

$(document).ready(function(){
	$("#question2").change(function(){
		var selectedID1 = $("#question1 option:selected").val();
		var selectedID2 = $("#question2 option:selected").val();
		if(selectedID1 == selectedID2){
			alert('already selected');
		}
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "question1">
        <option value="">-- Choose an Option --</option>
        <option value="questionaire_1">questionaire_1</option>
        <option value="questionaire_2">questionaire_2</option>
        <option value="questionaire_3">questionaire_3</option>
</select>

<select id = "question2">
        <option value="">-- Choose an Option --</option>
        <option value="questionaire_1">questionaire_1</option>
        <option value="questionaire_2">questionaire_2</option>
        <option value="questionaire_3">questionaire_3</option>
</select>

＆＃13;

Answer 2

您可以使用更改事件进行检查，我们将有一个数组，其中包含所选的先前选项，并且我们测试该数组是否包含新选择的值，如果是，我们会发出警报，否则我们将其推送到数组，如果我们更改选项...

，可以优化此代码以删除值

    var valuesArray = [];
    $('select').on('change',function(e){
      if( $.inArray($(this).value, valuesArray) ){
         alert('u selected the same option before');
      }else{
        // Your logic here
        valuesArray.push($(this).value);
      }
    });

Answer 3

您可以在更改选择框时查看val()，如下所示：

$("#question2").on("change", function() {
       if ($("#question2").val() == $("#question1").val())
          alert("Whoops!")
    })

实施例： https://jsfiddle.net/1dfbvpbm/

Answer 4

点击此处，它将根据第一次选择更改

禁用第二个选项中的选项

$('#question1').on('change',function(){   
   $('#question2 option').each(function(i,v){
       $(this).removeAttr('disabled');
   });
   $('#question2').find("option[value='"+$(this).val()+"']").attr('disabled','disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "question1">
        <option value="questionaire_1">questionaire_1</option>
        <option value="questionaire_2">questionaire_2</option>
        <option value="questionaire_3">questionaire_3</option>
</select>
check this


<select id = "question2">
        <option value="questionaire_1">questionaire_1</option>
        <option value="questionaire_2">questionaire_2</option>
        <option value="questionaire_3">questionaire_3</option>
</select>

Answer 5

试试这个：

<强> HTML：

<select id = "question1">
        <option>questionaire_1</option>
        <option>questionaire_2</option>
        <option>questionaire_3</option>
</select>

<select id = "question2">
        <option>questionaire_1</option>
        <option>questionaire_2</option>
        <option>questionaire_3</option>
</select>

<select id = "question3">
        <option>questionaire_1</option>
        <option>questionaire_2</option>
        <option>questionaire_3</option>
</select>

<强> jQuery的：

var previous;
$(document).ready(function() {
    $('select').on('blur focus', function () {
        previous = this.value;
        console.log(previous);
    }).on('change',function() {
        var selected_value = $(this).val();
        var cek = $('select').not(this).filter(function() { return $(this).val()==selected_value }).length;
        if (cek) {
            alert('Nope you cannot.');
            console.log(previous);
            this.value = previous;
        } else {
            previous = this.value;
        }
    });
});

FIDDLE：https://jsfiddle.net/zcoyse68/

解决！

或替代方式：

替代方式，您可以在选中后为所有其他<option>停用<select>。 e.g：

$('select').not(this).each(function() {
    $(this).find('option')
    .prop('disabled',false).filter('[value="'+selected_value+'"]')
    .prop('disabled',true);
});

Answer 6

请注意，此代码会检查具有相同城市类的所有选项，您可以将无限选择与城市类添加到您的文档

<html>

<head>
    <style>
    .city{
        display: block;
        height: 40px;
        width:400px;
    }
</style>
</head>

<body>
    <select class="city">
            <option value="Tehran" >Tehran</option>
            <option value="Tabriz" selected  >Tabriz</option>
            <option value="Karaj" >Karaj</option>
            <option value="Esfahan" >Esfahan</option>
        </select>
    <br />
    <br />

    <select class="city">
            <option value="Tehran" selected >Tehran</option>
            <option value="Tabriz"   >Tabriz</option>
            <option value="Karaj" >Karaj</option>
            <option value="Esfahan" >Esfahan</option>
        </select>
    <br />
    <br />

        <select class="city">
            <option value="Tehran" >Tehran</option>
            <option value="Tabriz"   >Tabriz</option>
            <option value="Karaj" selected >Karaj</option>
            <option value="Esfahan" >Esfahan</option>
        </select>
    <br />


    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            var cityCombo = $("select.city");
            var oldValue = null;

            cityCombo.focus(function(){
                oldValue = $(this).val();
            });

            cityCombo.change(function (event) {
                var currentValue = $(this).val();
                var otherComboSelectedValues = cityCombo.not($(this)).children("option:selected ");
                var canSelect = true;
                otherComboSelectedValues.each(function () {
                    if ($(this).val() == currentValue) {
                        alert("you can't select this item");
                        canSelect = false;
                        return false;
                    }
                });

                if(!canSelect){
                    $(this).val(oldValue);
                    oldValue = false;
                }

            });

        });
    </script>
</body>

</html>

如何检查是否已在其他选择中选择了选项

6 个答案: