CODEWITHSUNDEEP
javascriptjquery
Slimshadddyyy
Slimshadddyyy

Reputation: 4073

jQuery fetch disabled select option value

<select id="test_me" name="test_me" disabled>
 <option value="">Please select</option>
 <option value="1">Test One</option>
 <option value="2" selected>Test Two</option>
 <option value="3">Test Three</option>
</select>

<input type="hidden" value="" name="test_hidden" id="test_hidden">

Here option Test Two is selected and disabled. The below code fetches select value when dropdown is enabled and value is changed.

//pass value to hidden input
$('#test_me').change(function () {
    var id = $(this).val();
    $('input#test_hidden').val(id);
})

How can I pass selected option value i.e. 2 to my hidden input, when dropdown is disabled and value is selected ?

Upvotes: 4

Views: 4554

Answers (2)

PHPCoder
PHPCoder

Reputation: 77

<script type="text/javascript">
//pass value to hidden input
    $(document).ready(function(e) {

    var sel = $("#test_me").val();
    $("#test_hidden").val(sel);

    });

   </script>


<select id="test_me" name="test_me" disabled>
 <option value="">Please select</option>
 <option value="1">Test One</option>
 <option value="2" selected>Test Two</option>
 <option value="3">Test Three</option>
</select>

<input type="hidden" value="" name="test_hidden" id="test_hidden">

Upvotes: -1

Milind Anantwar
Milind Anantwar

Reputation: 82231

This issue is reported at http://bugs.jquery.com/ticket/13097 and marked as wont fix. for reason:

The long-standing logic in .val() ensures that we don't return disabled options in a select-multiple. The change just applies the same behavior for select-one now for consistency.

Alternative for this would be to use selectedindex property of select to target option by index:

$("#test_me option").eq($("#test_me").prop("selectedIndex")).val();

Complete Snippet:

var id =  $("#test_me option").eq($("#test_me").prop("selectedIndex")).val();;
$('input#test_hidden').val(id);

Upvotes: 4

Related Questions