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>
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>
"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>
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.
Related
This question already has answers here:
Drop-down box dependent on the option selected in another drop-down box
(8 answers)
Closed 2 years ago.
I have a dropdown with values A and B. I need to get another dropdown with a set of values 1,2,3,4 only if I change any value in my dropdown ('mySelect'). I need not change the value based on the selection. I just need to display another dropdown ('newSelect').
Dropdown 1:
<select id="mySelect" title="" disabled="disabled">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
If I change the value of dropdown 1, I need to get another dropdown(dropdown 2)
Dropdown 2:
<select id="newSelect" title="" disabled="disabled">
<option value="">Select</option>
<option value="1">Open</option>
<option value="2">Closed</option>
<option value="3">Reopen</option>
<option value="4">InProgress</option>
</select>
Please advice me how to achieve this.
Start your newSelect as hidden:
<select id="newSelect" title="" disabled="disabled" style="display: none">
...
</select>
Tell mySelect to show newSelect whenever mySelect is changed:
$('#mySelect').on('change', function() {
$('#newSelect').show();
});
There are multiple options. I believe you just want to display another dropdown if user selects any value from the first menu.
You can use onChange function and display second menu. For testing purpose, i have removed disabled attribute.
const subMenu = document.getElementById("newSelect");
const mainMenu = document.getElementById("mySelect");
window.onload = function() {
subMenu.style.display = "none";
}
mainMenu.onchange = function () {
subMenu.style.display = "block";
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select id="mySelect" title="">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<select id="newSelect" title="" >
<option value="">Select</option>
<option value="1">Open</option>
<option value="2">Closed</option>
<option value="3">Reopen</option>
<option value="4">InProgress</option>
</select>
</body>
</html>
I think this is what you were hoping for, where the second dropdown is shown when the first is not left unselected (i.e. has a value of 'Select'). If you only want the second dropdown to be shown on a specific choice in the first dropdown then you can change the following line:
if ($("#mySelect option:selected").text() == "Select") {
To this (remember to replace YOUR_VALUE), here we would be checking if the value is not equal to YOUR_VALUE and therefore hide the second dropdown:
if ($("#mySelect option:selected").text() != "YOUR_VALUE") {
Let me know if you needed anything else.
Ollie
// Hide select on load
$("#newSelect").hide();
// Add event to change of first select
$("#mySelect").change(function() {
// Check if selected option is 'Select'
if ($("#mySelect option:selected").text() == "Select") {
// Hide the second dropdown if the first dropdown is 'Select'
$("#newSelect").hide();
} else {
// Show the second dropdown if the first is not equal to 'Select'
$("#newSelect").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select id="mySelect" title="">
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
<div>
If I change the value of dropdown 1, I need to get another dropdown(dropdown 2) Dropdown 2:
</div>
<div>
<select id="newSelect" title="" disabled="disabled">
<option value="">Select</option>
<option value="1">Open</option>
<option value="2">Closed</option>
<option value="3">Reopen</option>
<option value="4">InProgress</option>
</select>
</div>
I want to use a select with an option that sends a blank value (empty string) when the form is submitted, but I still want the option to show text in the select. Using this doesn't work, as it shows no text for the third option:
<select name='scope' id='scope'>
<option value="wz:964" selected>Scope A</option>
<option value="sz:34218">Scope B</option>
<option value="">Scope C</option>
</select>
Though this works in plain HTML, I am using Select2 3.5.4, and it doesn't work after processing, since is replaces the third option with <option value=""></option>
I run the following sample code in local
Sample Code:
<head>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<script>
jQuery(document).ready(function() { jQuery("#example").select2(); });
</script>
</head>
<body>
<form action="#" method="post">
<select id="example" multiple="multiple" name="example[]" style="width: 300px">
<option value="wz:964">Scope A</option>
<option value="sz:34218">Scope B</option>
<option value=" ">Scope C</option>
</select>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
<br>
<br>
<br>
<br>
<?php
print_r($_REQUEST);
Output:
Note:
Use the " " instead of "".
Hope it will helpful.
I currently have a drop down list with a few values in it, I was wondering if it is possible to have a image next to the drop down list that changes corresponding to the value in the drop down list?
This the code for my drop down list. If you need anymore information please ask.
<form id="formddl">
<a id="infoheader">GreenB Colour</a> <br><br>
<div class="header">
<select>
<option value="0">Ivory White</option>
<option value="1">Carbon Black</option>
</select>
</div> <br><br>
<script src="fancystyle1/js/jquery.simple.select.js"></script>
<script type="text/javascript">
$(function() {
$('select').selectBoxes();
});
</script>
</form>
You can do it like this:
$("#iama").children().click(function changeImage(){
var value = $("#iama option:selected").val();
if (value == 1){
$("#image").attr("src","http://lorempixel.com/400/200/");
}
else {
$("#image").attr("src","http://lorempixel.com/600/200/");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select id="iama">
<option value=1>image for value 1</option>
<option value=2>image for another value</option>
</select>
<img id ="image" src="http://lorempixel.com/200/200/"/>
<pre>
<td>
<select name="proses1" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses2" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
<td>
<select name="proses3" class="form-control">
<option value="0" selected>-------</option>
<option value="1">1-Itemset</option>
<option value="2">2-Itemset</option>
<option value="3">3-Itemset</option>
</select>
</td>
</pre>
i have tag html like above.. and i want for example i selected 1-itemset from proses1 and then i choose 1-itemset from proses2,
1-itemset from proses1 it get back to default(-------),
so the point is i want option just can selected one option.. how i can make it. thanks before
Although you havent said what type of process you want, i suggest you do it with jquery like
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
FIDDLE
EDIT
To use this, first you need to add jQuery library to your code then place this inside $(document).ready() method. As a summary, place the code below inside your head section.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var selects = $("select[name=proses1],select[name=proses2],select[name=proses3]");
selects.on("change",function(evt){
selects.not("[name=" + evt.target.name + "]").val(0);
});
});
</script>
What this does is to add an onChange event handler with .on("change") method to the select elements and in that handler all select elements values are being set to 0 which is the very first option except the current one.
So I am trying to have a page on my site that contains 2 drop down boxes and a submit button. The submit button will point to a URL when clicked and then that will take them to a new page.
The URL will be based on whatever is selected in the drop down menus.
For example:
Drop down 1 has options A and B
Drop down 2 has options 1 and 2
Then there would be a different url for each combination
A1 points to URL-1
A2 points to URL-2
B1 points to URL-3
B2 points to URL-4
I really don't know much about coding and have been searching for a way to do this for the last 3 hours and I just don't even know how to google it. I really appreciate any help I can get at this point. Thank you in advance! :)
Here is the code from my drop boxes. I edited the options to match the example with the A, B, 1, and 2.
<html>
<body>
<form>
<select id="list1t">
<option>Select one</option>
<option>A</option>
<option>B</option>
</select>
</form>
<form>
<select id="list2">
<option>Select one</option>
<option>1</option>
<option>2</option>
</select>
</form>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var url;
$(function(){
$('#link').click(function(){
var val1=$('#first').val();
var val2=$('#second').val();
if(val1=='A'){
if(val2=='1'){
url="URL1";
}
else{
url="URL2";
}
}else{
if(val2=='1'){
url="URL3";
}
else{
url="URL4";
}
}
window.location.href=url;
});
});
</script>
the html would be
<select id="first">
<option value="A" selected>A</option>
<option value="B">B</option>
</select>
<select id="second">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
you can use a link for clicking . no need of form or submit button
BUTTON