[英]Display Text Using Jquery on HTML Select Tag
我是编程新手。 我有一个代码,我在HTML select标签上使用Jquery。 我有两个选择标签
<div style="margin-top:10px; width:280px; float:left">
<select name="s_name" id="s_name">
<option value="shahzad">Muhammad Shahzad Saleem</option>
<option value="hanif">Muhammad Jhangeer Hanif</option>
<option value="rana">Rana Muhammad Nadeem</option>
</select>
<br>
<select name="s_designation">
<option value="coo">Chief Operating Officer</option>
<option value="uh">Unit Head</option>
</select>
</div>
在第一个Select标签上,我使用Jquery
<script>
$(function() {
$('#s_name').on('change',function(){
if( $(this).val()=="rana"){
$("#rana").show()
}
else{
$("#rana").hide()
}
if( $(this).val()=="hanif"){
$("#hanif").show()
}
else{
$("#hanif").hide()
}
});});
</script>
此Jquery对于以下代码运行正常
<div id="rana" style="display:none; margin-left:350px; width:auto; float:left">
<input type="text" name="uh1" value="Muhammad Jhangeer Hanif"/>
</br>
<input type="text" name="uh1_designation" value="Unit Head"/>
</div>
<div id="hanif" style="display:none; margin-left:350px; width:auto; float:left">
<input type="text" name="uh2" value="Rana Muhammad Nadeem"/> <br/>
<input type="text" name="uh2_designation" value="Unit Head"/>
</div>
现在我想在第二个选择标签上使用jquery。 我想,当用户改变选择标记值s_name
然后它会自动进行变化,第二个选择标签s_designation
例如通过defalut我的选择标签显示s_name
是shahzad saleem
并针对其指定s_designation
是cheif操作offecier。 但是我想要当用户单击s_name
Hanif
或rana
针对它的名称s_designation
将自动更改Unit Head
。
我该怎么办? 请告诉我,这也将与我现有的jquery一起使用
您必须检查第一个Select
元素的值,并根据其值可以如下更改第二个select
元素,
编辑
$(function() {
$('#s_name').on('change',function(){
if( $(this).val()=="rana"){
$('#s_designation').val('coo');
} else {
$('#s_designation').val('uh');
}
});
还要为您的第二个select
s_designation
一个id。
看看这个:
$(function () { var hanif = $("#hanif"); var rana = $("#rana"); var value = null; var sName = $('#s_name'); var sDesignation = $('select[name="s_designation"]'); sName.on('change', function () { value = $(this).val(); hanif.toggle(value === 'hanif'); rana.toggle(value === 'rana'); sDesignation.val(value === 'hanif' || value === 'rana' ? 'uh' : 'coo'); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div style="margin-top:10px; width:280px; float:left"> <select name="s_name" id="s_name"> <option value="shahzad">Muhammad Shahzad Saleem</option> <option value="hanif">Muhammad Jhangeer Hanif</option> <option value="rana">Rana Muhammad Nadeem</option> </select> <br /> <select name="s_designation"> <option value="coo">Chief Operating Officer</option> <option value="uh">Unit Head</option> </select> </div> <div id="rana" style="display:none; margin-left:350px; width:auto; float:left"> <input type="text" name="uh1" value="Muhammad Jhangeer Hanif" /> <br /> <input type="text" name="uh1_designation" value="Unit Head" /> </div> <div id="hanif" style="display:none; margin-left:350px; width:auto; float:left"> <input type="text" name="uh2" value="Rana Muhammad Nadeem" /> <br /> <input type="text" name="uh2_designation" value="Unit Head" /> </div>
希望这可以帮助。 这是您所期望的结果吗?
@Sunny是的,您可以在另一个函数中使用$('#s_name')。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.