簡體   English   中英

在HTML Select標簽上使用Jquery顯示文本

[英]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_nameshahzad saleem並針對其指定s_designation是cheif操作offecier。 但是我想要當用戶單擊s_name Hanifrana針對它的名稱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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM