Display Text Using Jquery on HTML Select Tag

Question

I am new in programming. I have a code in which i use Jquery on HTML select tag. I have two Select Tag

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

On first Select tag i use 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>

This Jquery is working fine for the following code

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

Now i want to use jquery on my second select tag. I want that when user change the value in select tag s_name then it will make change automatically in second select tag s_designation For example by defalut my select tag show s_name is shahzad saleem and against its designation s_designation is cheif operating offecier. But i want when user click on s_name Hanif or rana then against its designation s_designation will automatically change Unit Head.

How i can do it? please tell me, Which will work with my existing jquery as well

You can do something like this http://stackoverflow.com/a/2934987/4052834 — Jose Luis, Aug 18 '15 at 06:10
@JoseLuis i already use `s_name` in a function. Can i use it another function? — sunny, Aug 18 '15 at 06:14

score 1 · Answer 1 · answered Aug 18 '15 at 06:11

You have to check the value of the first Select element and based on it's value you can change second select element as follows,

EDIT

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

Also put an id to your second select as s_designation.

score 1 · Accepted Answer · answered Aug 18 '15 at 06:26

Take a look at this:

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

Hope this helps. Is this the kind of result you were expecting?

Glad I could help. Curious though, why do you have the `#s_designation` select element when you don't seem to be using it? — Tahir Ahmed, Aug 18 '15 at 06:38

score 0 · Answer 3 · answered Aug 18 '15 at 06:16

0

@Sunny yes, you can use $('#s_name') in another function.

answered Aug 18 '15 at 06:16

Jose Luis

11
2

Display Text Using Jquery on HTML Select Tag

3 Answers3