两个单独的选择选项不应使用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>