CODEWITHSUNDEEP
htmljquerydropdown
Daniel
Daniel

Reputation: 41

get value of hidden dropdown disabled selected option

I have a simple dropdown list with the first option selected and disabled and two other options when I click on "Submit" and the dropdown is shown I get the value of the dropdown When the dropdown list is hidden I always get the value "null" even when I trying to set the value to a string "None" with $("#select").val("None") commmand

How can I set the value to "None" after hiding the dropdown list ?

===== Code output: ====

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").hide();
    $("select").hide();
    $("select").val("None");
  });
  $(".btn2").click(function(){
    $("p").show();
    $("select").show();
    $("#select option:first").prop("selected", true);
  });
  $("#btnSmbt").click(function() {
    $("#select").val("None");
    alert($("#select").val());
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<select id="select">
    <option value="" disabled selected>Select Number</option>
    <option value"1">1</option>
    <option value"2">2</option>
</select>
<br><br>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<br><br>
<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>

</body>
</html>

Upvotes: 0

Views: 1053

Answers (3)

fdomn-m
fdomn-m

Reputation: 28611

In addition to the other answers, note that disabled controls do not have values.

So your first option, which is disabled, will always give the value null regardless of its actual value

See the snippet for a demonstration of two select, one with disabled entry.

console.log($("#select1").val())
console.log($("#select2").val())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1">
    <option value="anyvalue" disabled selected>Select Number</option>
</select>
<select id="select2">
    <option value="anyvalue" selected>Select Number</option>
</select>

The actual issue in your code is likely (as pointed out in other answers) due to clearing it before displaying it. But for future reference if anyone tries to get a values of a disabled option, this would be the cause of it giving null.

Upvotes: 0

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

"None" is not existing value in your select option , thus it'll give you null

Also you html value options misses the =

In order to get a value you have to set an existing value between those option by example 1 or 2 as your example shows see below snippet:

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").hide();
    $("select").hide();
    $("select").val("1");
  });
  $(".btn2").click(function(){
    $("p").show();
    $("select").show();
    $("#select option:first").prop("selected", true);
  });
  
  $("#btnSmbt").click(function() {
    $("#select").val();
    alert($("#select").val());
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<select id="select">
    <option value="" disabled selected>Select Number</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<br><br>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
<br><br>
<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

There's a couple of issues in your code. Firstly the HTML has some errors in the option elements; you're missing the = between the value attribute and the value you provide.

Secondly, in the jQuery code you're setting the value of 'None' to the select, yet no option it contains has that value. I presume you're trying to select the first option element so that should be an empty string instead: .val('').

Lastly you alert() the value after you re-set it back to the default. This is why you always see nothing in the alert itself. Swap those lines around.

With that said, try this:

$(document).ready(function() {
  $(".btn1").click(function() {
    $("p").hide();
    $("select").hide();
    $("select").val('');
  });
  
  $(".btn2").click(function() {
    $("p").show();
    $("select").show();
    $("select").val('');
  });
  
  $("#btnSmbt").click(function() {
    alert($("#select").val());
    $("#select").val('');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<select id="select">
  <option value="" disabled selected>Select Number</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select><br><br>

<button class="btn1">Hide</button>
<button class="btn2">Show</button><br><br>

<button type="button" class="btn btn-default" id="btnSmbt" name="btnSmbt">Submit</button>

Upvotes: 1

Related Questions