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

Question

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.

See, the dropdown which is going to have the value of user interacting dropdown. Then the both should have the same values. — Rajaprabhu Aravindasamy
– Rajaprabhu Aravindasamy, Commented Oct 21, 2015 at 7:29
@RajaprabhuAravindasamy : I checked but its not the solution. — user5443928
– user5443928, Commented Oct 21, 2015 at 7:48

Domain · Accepted Answer · 2015-10-21 08:51:20Z

1

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/

edited Oct 21, 2015 at 8:51

answered Oct 21, 2015 at 7:50

Domain

11.8k3 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rajaprabhu Aravindasamy Over a year ago

It will add duplicate entries into the target dropdown. OP needs to explain a bit more about his/her problem.

Domain Over a year ago

var optionExists = (jQuery('#leaveCode1 option[value=' + value + ']').length > 0); if optionExist return false then you need to add option in dropdown

Domain Over a year ago

I have updated link in answer.Please use that link to get answer of your query

user5443928 Over a year ago

@WisdmLabs : can you make it disable after appending the option.

Domain Over a year ago

jQuery("#leaveCode1").prop("disabled", true); use this statement to disable dropdown.

Mohammed Alasa'ad · Accepted Answer · 2015-10-21 07:37:15Z

0

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>")
});

answered Oct 21, 2015 at 7:37

Mohammed Alasa'ad

5395 silver badges21 bronze badges

Comments

deviloper · Accepted Answer · 2015-10-21 09:00:10Z

0

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

edited Oct 21, 2015 at 9:00

answered Oct 21, 2015 at 8:53

deviloper

7,25210 gold badges52 silver badges79 bronze badges

Comments

RonyLoud · Accepted Answer · 2017-12-29 07:18:38Z

0

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>

edited Dec 29, 2017 at 7:18

answered Oct 21, 2015 at 8:03

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

1 Comment

user5443928 Over a year ago

@ pandeyvishal: I added your code but its throwning this Uncaught TypeError: Cannot read property 'toLowerCase' of undefined error.

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related