Javascript 在HTML选择标记上使用Jquery显示文本

我是编程新手。我有一段代码，其中我在HTML选择标记上使用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>

$（函数（）{
$（'s#u name'）。在（'change'，function（）上{
如果（$（this.val（）=“rana”）{
$（“#拉纳”）.show（）
}
否则{
$（“#rana”）.hide（）
}
if（$（this.val（）=“hanif”）{
$（“#hanif”）.show（）
}
否则{
$（“#hanif”）.hide（）
}
});});

对于以下代码，此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>

现在我想在第二个select标记上使用jquery。我希望，当用户更改select tag

s_name

中的值时，它将在第二个select tag

s_designation

中自动进行更改，例如，通过defalut，我的select tag show

s_name

是

shahzad saleem

，并根据其指定

s_designation

是cheif operating Officer。但我想当用户点击

s_名称
Hanif
或
rana
时，其
s_名称
将自动改变
单位头

我怎么能做到？请告诉我，这将与我现有的jquery一起工作
您必须检查第一个
Select
元素的值，并根据它的值更改第二个
Select
元素，如下所示

编辑

$(function() {
    $('#s_name').on('change',function(){
    if( $(this).val()=="rana"){
        $('#s_designation').val('coo');
    } else {
        $('#s_designation').val('uh');
    }
});

另外，在您的第二个
选择
作为
s_名称
@Sunny是的，您可以在另一个函数中使用$（“#s_名称”）。
查看以下内容：


$（函数（）{
var hanif=$（“#hanif”）；
var rana=$（“#rana”）；
var值=null；
var sName=$（'s#u name'）；
var sDesignation=$（'select[name=“s_designation”]”）；
sName.on（'change'，function（）{
value=$（this.val（）；
切换（值=='hanif'）；
rana.toggle（值=='rana'）；
sDesignation.val（value=='hanif'| | value==='rana'？'uh'：'coo'）；
});
});

穆罕默德·沙赫扎德·萨利姆
穆罕默德·詹格尔·哈尼夫
拉纳·穆罕默德·纳迪姆


首席运营官
单位负责人




您可以这样做@JoseLuis我已经在函数中使用了
s\u name
。我可以用另一个函数吗？我是用这个函数做的（$）（函数（）{$（'s#u name'）。在（'change'，函数（）{if（$（this.val（）=“shahzad”）{$（'s#u designation'）。val（'coo'）}if（$（this.val（）=“rana”）{$（'s#designation'）。val（'uh'）$）（'rana”）。show（））{$（“#rana”）.hide（）}if（$（this.val（）=”hanif”）{$（“#s#u名称”）.val（'uh'）$（“#hanif”）.show（）}else{$（“#hanif”）.hide（）}）
穆罕默德·沙赫扎德·萨利姆·穆罕默德·詹格尔·哈尼夫·拉纳·穆罕默德·纳迪姆
首席运营官单位负责人
很高兴我能帮上忙。但奇怪的是，为什么你有
#s_名称
选择元素，而你似乎不使用它？