This question already has answers here:
Change the selected value of a drop-down list with jQuery
(18 answers)
Closed 7 years ago.
I'm trying to figure out a way to automatically select an option, based on a passed variable, that matches only the value of that option.
JS Fiddle Link Demo
<label>
<span>Font Type</span>
<select id="options>
<option value="one">One</option>
<option value="two" selected>Two</option>
<option value="three">Three</option>
</select>
</label>
function loadSelect(userFont){
$('#options').find('option[value='+userFont+']').attr('selected', 'selected');
}
loadSelect(three);
Just set the value on the <select> tag:
$('#options').val(userFont);
$(function() {
$("#options").val("three");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="options">
<option value="one">One</option>
<option value="two" selected>Two</option>
<option value="three">Three</option>
</select>
Related
This question already has answers here:
Populating One Select Box Based on the Selection in Another Select Box - JQuery?
(3 answers)
Closed 4 years ago.
here is my html
how to change selection form based on this:
<select id="myclass">
<option value="one">Form one</option>
<option value="two">Form two</option>
</select>
I chose "Form one" it show me only select id="one" or it
I chose "Form two" it show me only select id="two"
<select id="one">
<option value="one1">one1</option>
<option value="one2">one2</option>
</select>
<select id="two">
<option value="two1">two1</option>
<option value="two2">two2</option>
</select>
You can do this by Jquery as follows:
$('#myclass').change(function(){
$('#one, #two').hide();
$('#'+$(this).val()).show();
});
Something like this:
$('#myclass').change(function(){
$('#one').hide();
$('#two').hide();
$('#'+$(this).val()).show();
});
This question already has an answer here:
Event Handling when option is selected from dropdown menu
(1 answer)
Closed 6 years ago.
I need to handle alert event on chosen option.
<select>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
For ex., if I choose "B" option, I want alert like "Chosen option is: B", etc...
Thank you!
Try It Once Its Working .
function myFunction() {
var x = document.getElementById("mySelect").value;
alert('You Selected'+' '+x);
}
<p>Select a any value in list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="1">A
<option value="2">B
<option value="3">C
<option value="4">D
</select>
Working example: (It's a jQuery example, using selectors and events basically)
// Wait for DOM load
$(document).ready(function() {
// Binding change event to the <select>
$('#my_select').change(function() {
// Saving the HTML corresponding to the value selected
$selected = $('#my_select option:selected').text();;
// Debugging actual selection DOM-node on console
console.log($('#my_select option:selected'));
// Showing the message
alert("Chosen option is: " + $selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I have set an ID to identify you select -->
<select id="my_select">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
Some official jQuery's documentation links:
http://api.jquery.com/category/events/
http://api.jquery.com/category/selectors/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Hello I have first one input which is
<select id="selectcontract" name="contract" class="input-xlarge" >
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option>
this input contains 2 options Buy and Rent. So I would like when you choose Buy foe example to populate the values of second and third input if you choose Rent to populate exactly those same inputs but with different values and value names.
here are the second and the third inputs:
Second Select:
<select id="Pricefrom" name="minimum_price" >
<option value="">Price From</option>
<option value="1">1</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
Third Select:
<select id="Princeuntil" name="maximum_price" >
<option value="">Price Until</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
Any advice in which direction I should realize this goal ? I guess it should be something with jquery since the change should be made mediate when you choose either buy or rent.
You can create one div for buy and one for rent with class and after show or hide their
Example on fiddle:
https://jsfiddle.net/tehb2fxt/1/
Div Buy (is necessary change the name prop to not repeat) and add CLASS "class_price"
<select id="selectcontract" name="contract" class="input-xlarge class_price">
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option>
</select>
<div class="div_buy" style="display: none">
<select id="Pricefrom_buy" name="Pricefrom_buy" class="class_price">
<option value="">Price From Buy</option>
<option value="1">1</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
</select>
<select id="Princeuntil_buy" name="Princeuntil_buy" class="class_price">
<option value="">Price Until Buy</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
</select>
</div>
<div class="div_rent" style="display: none">
<select id="Pricefrom_rent" name="Pricefrom_rent" class="class_price">
<option value="">Price From Rent</option>
<option value="8">8</option>
<option value="800">800</option>
<option value="8000">8000</option>
<option value="8500">8500</option>
</select>
<select id="Princeuntil_rent" name="Princeuntil_rent" class="class_price">
<option value="">Price Until Rent</option>
<option value="900">900</option>
<option value="9000">9000</option>
<option value="9500">9500</option>
<option value="9000">9000</option>
</select>
</div>
Jquery to show and hide according with select:
<script type="text/javascript">
$(document).ready(function(){
$('#selectcontract').change
(
function()
{
if($(this).val() == "1")
{
$('.div_buy').show('slow');
$('.div_rent').hide('slow');
}
else if($(this).val() == "2")
{
$('.div_buy').hide('slow');
$('.div_rent').show('slow');
}
else
{
$('.div_buy').hide('slow');
$('.div_rent').hide('slow');
}
}
);
}
);
</script>
To control and not be in conflict 2 selects add input text(will changed to type="hidden" when finish test) for recovery values of pricefrom and princeuntil(buy and rent)
<input type="hidden" id="Pricefrom" value="0" name="Pricefrom">
<input type="hidden" id="Princeuntil" value="0" name="Princeuntil">
And add event Jquery when values class changed
$('.class_price').change
(
function () {
if($('#selectcontract').val() == "1") //if buy
{
$('#Pricefrom').val($('#Pricefrom_buy').val()); //get value select
$('#Princeuntil').val($('#Princeuntil_buy').val()); //get value select
}
else if($('#selectcontract').val() == "2") //if rent
{
$('#Pricefrom').val($('#Pricefrom_rent').val()); //get value select
$('#Princeuntil').val($('#Princeuntil_rent').val()); //get value select
}
else {//if not select
$('#Pricefrom').val("0");
$('#Princeuntil').val("0");
}
}
);
Static Lists
A simple fiddle proof of concept.
https://jsfiddle.net/cgjjg2dy/
The main part is:
$('#selectcontract').change(function (event) {
$(".section").hide();
$("#section" + $(this).val()).show();
});
I hide all the sections, then I show the one that corresponds to the option chosen. You can get even fancier with fadeOut() and fadeIn() too!
AJAX
If you want to dynamically retrieve your options from a server/database, you have to use AJAX. Instead of using .hide() and .show() in your change() handler, you just make an AJAX call and retrieve the data, then modify the DOM as necessary. Quite a bit more complex, but still the same idea.
This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 9 years ago.
I have created a simple drop down menu using JavaScript where it displays the month of the year. Each option has a value. When using the onchange function to call another function count, I am unable to read the value of the drop down menu.
Function count:
<script language="javascript" type="text/javascript">
function count(){
debugger;
alert(lst_MonthDrop.value);
}
</script>
Drop down menu:
<select name="lst_MonthDrop"
style="background-color:#FF9933; color:#FFF; border:none; border-radius:5px;"
onchange="count()">
<option> When do you want to go?</option>
<option value="2014-01-01">January</option>
<option value="2014-02-01">Feburary</option>
<option value="2014-03-01">March</option>
<option value="2014-04-01">April</option>
<option value="2014-05-01">May</option>
<option value="2014-06-01">June</option>
<option value="2014-07-01">July</option>
<option value="2014-08-01">August</option>
<option value="2014-09-01">September</option>
<option value="2014-10-01">October</option>
<option value="2014-11-01">November</option>
<option value="2014-13-01">December</option>
</select>
JSFIDDLE
Modify the onchange to call count(this)
<select name="lst_MonthDrop" style="background-color:#FF9933; color:#FFF; border:none; border-radius:5px;" onchange="count(this)">
<option> When do you want to go?</option>
<option value="2014-01-01">January</option>
<option value="2014-02-01">Feburary</option>
<option value="2014-03-01">March</option>
<option value="2014-04-01">April</option>
<option value="2014-05-01">May</option>
<option value="2014-06-01">June</option>
<option value="2014-07-01">July</option>
<option value="2014-08-01">August</option>
<option value="2014-09-01">September</option>
<option value="2014-10-01">October</option>
<option value="2014-11-01">November</option>
<option value="2014-13-01">December</option>
</select>
Then give the count function an argument:
function count(s){
alert(s.value);
}
When the onchange event is called it will pass a reference to the select element and you can then get the value from that reference.
Give your select an id and retrieve the content like:
var lst_MonthDrop = document.getElementById('lst_MonthDrop');
alert(lst_MonthDrop.options[lst_MonthDrop.options.selectedIndex].innerHTML);
Give the select an ID: <select name="lst_MonthDrop" id="first-month"> and try again with this function:
function count(){
var firstMonth = document.getElementById('first-month');
// Value of the selected option
alert(firstMonth.value);
// Text of the selected option
alert(firstMonth.options[firstMonth.selectedIndex].text);
}
This question already has answers here:
keep user checked radiobtn checked even after postback
(2 answers)
Closed 5 months ago.
How do I retain whatever was selected from the dropdown even after page refresh so user knows what he/she selected using jquery? or javascript?
<select id="hospitalDropDown" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option disabled="disabled">Select Hospital</option>
<option value="http://mysite.com/events/Pages/default1.aspx">All Hospitals</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Dyer">Dyer</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Carmel">Carmel</option>
</select>
Try this:
<select id="hospitalDropDown" onchange="window.open('http://mysite.com/events/Pages/default1.aspx?hos='+this.value,'_top')">
<option disabled="disabled">Select Hospital</option>
<option value="All">All Hospitals</option>
<option value="Dyer">Dyer</option>
<option value="Carmel">Carmel</option>
</select>
$(document).ready(function(){
var value = window.location.href.match(/[?&]hos=([^&#]+)/) || [];
$('#hospitalDropDown').val(value[1]);
});
<select id="hospitalDropDown">
<option value="">All Hospitals</option>
<option value="Dyer">Dyer</option>
<option value="Carmel">Carmel</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#hospitalDropDown').val('<?php echo $_GET['hos']; ?>');
$('#hospitalDropDown').change(function() {
location.href = 'http://mysite.com/events/Pages/default1.aspx?hos=' + $(this).val();
});
});
</script>