CODEWITHSUNDEEP
javascriptjqueryhtml
user5443928
user5443928

Reputation:

Can not set value dynamically in drop down using javascript/jquery

I have one issue.I want to set value in drop down by onchange event using javascript/Jquery. I am explaining my code below.

<h1>drop down</h1>
<p>
    <select id="leaveCode" name="leaveCode" onChange="SetValue();">
        <option value="10">Annual Leave</option>
        <option value="11">Medical Leave</option>
        <option value="14">Long Service</option>
        <option value="17">Leave Without Pay</option>
    </select>
</p>
<p>
    <select id="leaveCode1" name="leaveCode">
        <option value="">select value</option>
        <option value="21">xyz</option>
        <option value="21">abc</option>
    </select>
</p>

function SetValue(){
  var value=document.getElementById('leaveCode').value;
  var name=document.getElementById('leaveCode').name;
  document.getElementById('leaveCode1').value=value;
  document.getElementById('leaveCode1').name=name;
}

Here my requirement is when user will select any value from 1st drop down list it will display also in second dropdown list in disable mode.Please help me.

Upvotes: 0

Views: 1022

Answers (4)

RonyLoud
RonyLoud

Reputation: 2436

function SetValue(obj) {
  var $this = $(obj);
  var val = $this.val();
  var txt = $('option:selected', $this).text();
  $('#leaveCode1').append($('<option></option>').val(val).html(txt));
  $('#leaveCode1').val(val).prop('disabled', 'disabled');
}
SetValue('#leaveCode');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>drop down</h1>
<p>
  <select id="leaveCode" name="leaveCode" onChange="SetValue(this);">
        <option value="10">Annual Leave</option>
        <option value="11">Medical Leave</option>
        <option value="14">Long Service</option>
        <option value="17">Leave Without Pay</option>
    </select>
</p>
<p>
  <select id="leaveCode1" name="leaveCode">
        <option value="">select value</option>
        <option value="21">xyz</option>
        <option value="21">abc</option>
    </select>
</p>

Upvotes: 0

deviloper
deviloper

Reputation: 7240

I believe this is the answer you need:

$("#leaveCode").change(function(){
    var selectedOptionValue = $(this).find(":selected").val();
    var selectedOptionText = $(this).find(":selected").text();
    var newOption = '<option value='+selectedOptionValue+' disabled>'+selectedOptionText+'</option>';
    $("#leaveCode1 option").last().after(newOption);
});

JSFIDDLE

Upvotes: 0

Domain
Domain

Reputation: 11808

You can use following statement that will append and make select in leavecode1 dropdown.Use following statements in your js file

   jQuery('#leaveCode').change(function(){
        //get selected text from #leaveCode list
        text = jQuery("#leaveCode option:selected").text();
        //get selected value for selected text
        value = jQuery("#leaveCode option:selected").val();
//append new in #leavecode1 and make this option as selected option.
        jQuery("#leaveCode1").append("<option value=" + value + " selected>" + text + "</option>");



    });

You can check this using following link(updated)-http://jsfiddle.net/aecrcvt2/2/

Upvotes: 1

Mohammed Alasa&#39;ad
Mohammed Alasa&#39;ad

Reputation: 539

The best way is to Append the new value in your dropdownlist on change the leaveCode dropdownlist

  $("#leaveCode").change(function(){
$("#leaveCode1").append("<option value=" + $("#leaveCode").val() + ">" + $("#leaveCode option:selected").text() + "</option>")
});

Upvotes: 0

Related Questions