兩個單獨的選擇選項應該不會衝突使用JavaScript

Question

誰能幫我弄清楚什麼是錯回事我寫的代碼， 我有我想要的兩個選擇方案之間的搜索值的兩個單獨的選擇選項

HTML：

<select style="font-size:18px" id="sg" name="sg" onchange="SetText(sg,word1)"> 
    <option value="all" selected="selected">Select</option> 
    <option value="icpa_2039">icpa_2039</option> 
    <option value="icpl_131">icpl_131</option> 
    <option value="icpl_96061">icpl_96061</option> 
</select> 
between 
<select style="font-size:18px" id="sg2" name="sg2" onchange="SetText(sg2,word2)"> 
    <option value="all" selected="selected">Select</option> 
    <option value="icpa_2039">icpa_2039</option> 
    <option value="icpl_131">icpl_131</option> 
    <option value="icpl_96061">icpl_96061</option> 
    </select> 

JS：

<script src="js/jquery-1.9.0.min.js"></script> 
<script> 
    var $j = jQuery.noConflict(); 
    $j(function(){ 
     $j("select[id^='sg']").change(function(){ 
     var geno1 =$j('#sg').val(); 
     var geno2 =$j('#sg2').val(); 

     if(geno1==geno2) { 
      $j('#warning').show(); 
      $j('#warning').html("Please choose two differnet genotypes names!!!"); 
     }else { 
      $j('#warning').hide(); 
     } 
     }); 
    }); 
</script> 

Answer 1

如果所選值在下拉列表中均相同，則會在警告div中顯示錯誤消息。希望我理解正確。下面是代碼：

var $j = jQuery.noConflict(); 
 
$j(function() { 
 
    $j("select[id^='sg']").change(function() { 
 
    var geno1 = $j('#sg').val(); 
 
    var geno2 = $j('#sg2').val(); 
 
    $j('#warning').hide(); 
 
    if (geno1 == geno2) { 
 
     $j('#warning').show().html("Please choose two differnet genotypes names!!!"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<td> <select style="font-size:18px" id="sg" name="sg"> 
 
<option value="all" selected="selected">Select</option> 
 
<option value="icpa_2039">icpa_2039</option> 
 
<option value="icpl_131">icpl_131</option> 
 
<option value="icpl_96061">icpl_96061</option> </select> </td> 
 
<td> between </td> 
 
<td> <select style="font-size:18px" id="sg2" name="sg2"> 
 
<option value="all" selected="selected">Select</option> 
 
<option value="icpa_2039">icpa_2039</option> 
 
<option value="icpl_131">icpl_131</option> 
 
<option value="icpl_96061">icpl_96061</option> </select></td> 
 
<div id="warning"></div>

Answer 2

是沒有問題的。只從select中刪除onchange屬性並嘗試agin。

試試這個：Demo

HTML：

<select style="font-size:18px" id="sg" name="sg"> 
    <option value="all" selected="selected">Select</option> 
    <option value="icpa_2039">icpa_2039</option> 
    <option value="icpl_131">icpl_131</option> 
    <option value="icpl_96061">icpl_96061</option> 
</select> 
between 
<select style="font-size:18px" id="sg2" name="sg2"> 
    <option value="all" selected="selected">Select</option> 
    <option value="icpa_2039">icpa_2039</option> 
    <option value="icpl_131">icpl_131</option> 
    <option value="icpl_96061">icpl_96061</option> 
</select> 
<div id="warning"> 
</div> 

的Jquery：

var $j = jQuery.noConflict(); 
$j(function(){ 
    $j("select[id^='sg']").change(function(){ 
    var geno1 =$j('#sg').val(); 
    var geno2 =$j('#sg2').val(); 

    if(geno1==geno2) { 
     $j('#warning').show(); 
     $j('#warning').html("Please choose two differnet genotypes names!!!"); 
    }else { 
     $j('#warning').hide(); 
    } 
    }); 
}); 

Answer 3

似乎喜歡上你的代碼沒有問題。

請確保您格式化您的代碼。

var $j = jQuery.noConflict(); 
 
$j(function() { 
 
     $j("select[id^='sg']").change(function() { 
 
     var geno1 = $j('#sg').val(); 
 
     var geno2 = $j('#sg2').val(); 
 
     if (geno1 == geno2) { 
 
      $j('#warning').show(); 
 
      $j('#warning').html("Please choose two differnet genotypes names!!!"); 
 
     } else { 
 
      $j('#warning').hide(); 
 
     } 
 
     }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<td> 
 
    <select style="font-size:18px" id="sg" name="sg"> 
 
    <option value="all" selected="selected">Select</option> 
 
    <option value="icpa_2039">icpa_2039</option> 
 
    <option value="icpl_131">icpl_131</option> 
 
    <option value="icpl_96061">icpl_96061</option> 
 
    </select> 
 
</td> 
 
<td> between </td> 
 
<td> 
 
    <select style="font-size:18px" id="sg2" name="sg2"> 
 
    <option value="all" selected="selected">Select</option> 
 
    <option value="icpa_2039">icpa_2039</option> 
 
    <option value="icpl_131">icpl_131</option> 
 
    <option value="icpl_96061">icpl_96061</option> 
 
    </select> 
 
</td> 
 
<div id='warning'>Warning</div>