Question

我是编程新手。我有一个代码，我在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是有效的。但我希望当用户点击s_name Hanif或rana时，其名称s_designation会自动更改Unit Head。

我怎么做？请告诉我，哪个也适用于我现有的jquery

Answer 1

您必须检查第一个Select元素的值，并根据它的值，您可以更改第二个select元素，如下所示，

修改

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

同时为您的第二个select添加一个ID s_designation。

Answer 2

看看这个：

$(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>

希望这会有所帮助。这是你期待的那种结果吗？

Answer 3

@Sunny是的，你可以在另一个函数中使用$（'＃s_name'）。

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

3 个答案: