如果 html jquery 中两个选定的选项值相等，如何发出警报？

Question

我试图在 html 中阻止 selecting 相同的输入值。我尝试了很多 jquery 函数，包括这个，

    $("#targetLanguage").change(function() {
    var a = $("#sourceLanguage").val();
    var b = $(this).val(); 
    if(a === b) {          
        alert(a + ' matches ' + b);
    }
});

我认为这段代码应该可以工作，但是没有任何作用。如何在第二个 select 框上阻止 selecting 相同的输入。

<div class="align-items-baseline d-flex flex-column form-group">
   <label for="sourceLanguage"><@spring.message "sourceLanguage"/></label>
   <select id="sourceLanguage" name="sourceLanguage" class="form-control" required>
       <option value="" selected disabled><@spring.message 'selectSourceLanguage' /></option>
          <#list languageList as language>
             <option value="${language.getLanguageCode()}" data-error="<@spring.message "selectSourceLanguage" />"> ${language.languageCode}</option></#list>
     </select>
</div>
    
<div class="align-items-baseline d-flex flex-column form-group">
    <label for="targetLanguage"><@spring.message "targetLanguage"/></label>
    <select id="targetLanguage" name="targetLanguage" class="form-control" data-delayy="1000" required>
        <option value="" selected disabled><@spring.message 'selectTargetLanguage' </option>
            <#list languageList as language>
                <option  value="${language.getLanguageCode()}" data-error="<@spring.message "selectTargetLanguage"/>">${language.languageCode}</option></#list>
     </select>
</div>

Answer 1

从您的选项中删除禁用属性

$("#targetLanguage").change(function() {
    var a = $("#sourceLanguage").val();
    var b = $(this).val(); 
    if(a === b) {          
        alert(a + ' matches ' + b);
    }
    console.log('a = '+ a);
    console.log('b = '+ b);
    console.log(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="align-items-baseline d-flex flex-column form-group">
   <label for="sourceLanguage"><@spring.message "sourceLanguage"/></label>
   <select id="sourceLanguage" name="sourceLanguage" class="form-control" required>
       <option value="" selected ><@spring.message 'selectSourceLanguage' /></option>
          <#list languageList as language>
             <option value="${language.getLanguageCode()}" data-error="<@spring.message "selectSourceLanguage" />"> ${language.languageCode}</option></#list>
     </select>
</div>
    
<div class="align-items-baseline d-flex flex-column form-group">
    <label for="targetLanguage"><@spring.message "targetLanguage"/></label>
    <select id="targetLanguage" name="targetLanguage" class="form-control" data-delayy="1000" required>
        <option value="" selected ><@spring.message 'selectTargetLanguage' </option>
            <#list languageList as language>
                <option  value="${language.getLanguageCode()}" data-error="<@spring.message "selectTargetLanguage"/>">${language.languageCode}</option></#list>
     </select>
</div>

Answer 2

试试这个

html

<div class="align-items-baseline d-flex flex-column form-group">
   <label for="sourceLanguage"><@spring.message "sourceLanguage"/></label>
   <select id="sourceLanguage" name="sourceLanguage" class="form-control" onchage="check_values()" required>
       <option value="" selected disabled><@spring.message 'selectSourceLanguage' /></option>
          <#list languageList as language>
             <option value="${language.getLanguageCode()}" data-error="<@spring.message "selectSourceLanguage" />"> ${language.languageCode}</option></#list>
     </select>
</div>
    
<div class="align-items-baseline d-flex flex-column form-group">
    <label for="targetLanguage"><@spring.message "targetLanguage"/></label>
    <select id="targetLanguage" name="targetLanguage" class="form-control" data-delayy="1000" onchage="check_values()" required>
        <option value="" selected disabled><@spring.message 'selectTargetLanguage' </option>
            <#list languageList as language>
                <option  value="${language.getLanguageCode()}" data-error="<@spring.message "selectTargetLanguage"/>">${language.languageCode}</option></#list>
     </select>
</div>

Javascript

function check_values() 
{
    var sourceLanguage = $("#sourceLanguage").val();
    var targetLanguage = $("#targetLanguage").val();
   
    if(sourceLanguage == targetLanguage) 
   {
     alert(sourceLanguage + " matches "+ targetLanguage);
   }
}

如果 html jquery 中两个选定的选项值相等，如何发出警报？

How to give an alert if two selected option values are equal in html jquery?

html

jquery

freemarker

试试这个

html

Javascript