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