I've been pulling my hair out with this one, although I'm certain the solution is embarrassingly simple! I have developed a pull-down menu that requires a selection before presenting more choices, based on the initial selection. It works fine.
However, I need to have jQuery submit the value of the option chosen without a submit button present. So, basically, when a user selects a fruit size, the user is taken to the relevant page in the option value. I cant figure it out! Heres my code:
jQuery:
<script type="text/javascript">
$(document).ready(function()
{
$('#fruit').change(function()
{
var val = $('#fruit').val();
$('.fruitSubSelect').hide();
if(val)
{
$('#fruit'+val).show();
$('#noFruit').hide();
}
});
});
</script>
CSS to hide size select:
<style type="text/css">
.fruitSubSelect {display: none;}
</style>
HTML:
<form action="nothing">
<select id="fruit">
<option value="">Choose Fruit</option>
<option>Apple</option>
<option>Orange</option>
</select>
<select id="fruitApple" class="fruitSubSelect">
<option value="">Choose Size</option>
<option value="http://www.mysite.com/big-apple.html">Big Apple</option>
<option value="http://www.mysite.com/small-apple.html">Small Apple</option>
</select>
<select id="fruitOrange" class="fruitSubSelect">
<option value="">Choose Size</option>
<option value="http://www.mysite.com/big-orange.html">Big Orange</option>
<option value="http://www.mysite.com/small-orange.html">Small Orange</option>
</select>
<select id="noFruit">
<option value="">Choose A Fruit First</option>
<option value="">Please Select Fruit First</option>
</select>
</form>
Would appreciate any help! Thanks.
I think you're looking for something like this:
$(".fruitSubSelect").change(function(){
window.location.href = this.value;
});
Example: http://jsfiddle.net/jonathon/bWUnR/
This will get the selected value of the dropdown and set the window location to it (so the page will go to it).
the addition of this into your jquery alert's the selected option's URL:
$('.fruitSubSelect').change(function(){
alert($(':selected',$(this)).val());
});
live example: http://jsfiddle.net/274Gv/
With dropdowns, do not use .val(). :selected is what you're looking for. http://api.jquery.com/selected-selector/
Related
I have a drop-down box in HTML showing three options. I am also using javaScript and want to use the getElementById tool to connect the two. However, I only have one ID for the drop-down box. How does javascript recognize that I have three different options?
There's actually a demo on w3schools.com showing exactly what you're asking. To get the number of options, you could do something like
document.getElementById("mySelect").options.length
Here is an example of how to retrieve the value of a dropdown: https://jsfiddle.net/ykcwgnm8/
You use getElementBy* functions to get the element, however value attribute denotes which item is currently selected.
HTML:
<select id="dropdown">
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
JS:
function onChangeHandler(e)
{
alert("you have selected item with value "+this.value);
}
document.getElementById("dropdown").addEventListener("change", onChangeHandler);
You can listen for change like this
var list = document.getElementById("mySelect")
list.addEventListener('change', function(e){
console.log(e.target.selectedIndex)
console.log(e.target.options[e.target.selectedIndex].text)
})
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
You can do something like this, here is an example:-
html
<select id="selectBox">
<option value="1">option 1</option>
<option value="2" selected="selected">option 2</option>
<option value="3">option 3</option>
</select>
js
var e = document.getElementById("selectBox");
var selectedValue = e.options[e.selectedIndex].value;
// this will give selectedValue as 2
Hope you find this useful!!
Here's my code. Is it possible to empty the value of the first option using jquery/javascript ?
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
so it will become like that:
<option value="">Select category</option>
I already know that i can remove the whole first option by targeting its value
$("#select_1 option[value='0']").remove();
You can use plain javascript to get the first option of a select element using .options like so, which returns an indexed collection, so you can just use zero based index to grab the first option and set it's value property:
document.getElementById("select_1").options[0].value = '';
To target the first element of a collection use :first. Then you can use val('') to remove the value from it:
$('#select_1 option:first').val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<script>
$(document).ready(function (){
$('#btnremoveoption').click(function (){
$('#select_1 option:first').remove();
});
});
</script>
<body>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>
This Program will keep Removing first option when ever button will be click.
$(document).ready(function (){
$('#select_1 option:first').remove();
});
this will remove it onload of the page. without leaving the option blank it will be filled with the next option.
Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});
Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.
This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO
I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
Here is what I have:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!
Try the following:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
What you were looking for was 'onchange' instead of 'onsubmit'
Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>
I would recommend that you start using the javascript framework jQuery as it really will make your life much easier when it comes to javascript.
When you have jQuery installed and setup in you web page you should be able to do something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>
Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>
I want set a dropdown(select) to be change based on the value of the entries.
I have
<select id="mySelect">
<option value="ps">Please Select</option>
<option value="ab">Fred</option>
<option value="fg">George</option>
<option value="ac">Dave</option>
</select>
And I know that I want to change the dropdown so that the option with the value of "fg" is selected. How can I do this with JQuery?
You should use
$('#dropdownid').val('selectedvalue');
Here's an example:
$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
<option value=''>- Please choose -</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='selectedvalue'>There we go!</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
$('#yourdropddownid').val('fg');
Optionally,
$('select>option:eq(3)').attr('selected', true);
where 3 is the index of the option you want.
Live Demo
$('#mySelect').val('fg');...........
$('#mySelect').val('ab').change();
// or
$('#mySelect').val('ab').trigger("change");
You can use this jQuery code which I find it eaiser to use:
$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="your_id" name="name" class="form-control input-md">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
</select>
You can simply use:
$('#select_id').val('fg')
In your case $("#mySelect").val("fg") :)
May be too late to answer, but at least some one will get help.
You can try two options:
This is the result when you want to assign based on index value, where '0' is Index.
$('#mySelect').prop('selectedIndex', 0);
don't use 'attr' since it is deprecated with latest jquery.
When you want to select based on option value then choose this :
$('#mySelect').val('fg');
where 'fg' is the option value
$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
<option value=''>- Please choose -</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='selectedvalue'>There we go!</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
This code worked for me:
$(function() {
$('[id=mycolors] option').filter(function() {
return ($(this).text() == 'Green'); //To select Green
}).prop('selected', true);
});
With this HTML select list:
<select id="mycolors">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
I have a different situation, where the drop down list values are already hard coded. There are only 12 districts so the jQuery Autocomplete UI control isn't populated by code.
The solution is much easier. Because I had to wade through other posts where it was assumed the control was being dynamically loaded, wasn't finding what I needed and then finally figured it out.
So where you have HTML as below, setting the selected index is set like this, note the -input part, which is in addition to the drop down id:
$('#project-locationSearch-dist-input').val('1');
<label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
<select id="project-locationSearch-dist" data-tabindex="1">
<option id="optDistrictOne" value="01">1</option>
<option id="optDistrictTwo" value="02">2</option>
<option id="optDistrictThree" value="03">3</option>
<option id="optDistrictFour" value="04">4</option>
<option id="optDistrictFive" value="05">5</option>
<option id="optDistrictSix" value="06">6</option>
<option id="optDistrictSeven" value="07">7</option>
<option id="optDistrictEight" value="08">8</option>
<option id="optDistrictNine" value="09">9</option>
<option id="optDistrictTen" value="10">10</option>
<option id="optDistrictEleven" value="11">11</option>
<option id="optDistrictTwelve" value="12">12</option>
</select>
Something else figured out about the Autocomplete control is how to properly disable/empty it. We have 3 controls working together, 2 of them mutually exclusive:
//SPN
spnDDL.combobox({
select: function (event, ui) {
var spnVal = spnDDL.val();
//fire search event
$('#project-locationSearch-pid-input').val('');
$('#project-locationSearch-pid-input').prop('disabled', true);
pidDDL.empty(); //empty the pid list
}
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();
//PID
pidDDL.combobox({
select: function (event, ui) {
var pidVal = pidDDL.val();
//fire search event
$('#project-locationSearch-spn-input').val('');
$('#project-locationSearch-spn-input').prop('disabled', true);
spnDDL.empty(); //empty the spn list
}
});
Some of this is beyond the scope of the post and I don't know where to put it exactly. Since this is very helpful and took some time to figure out, it's being shared.
Und Also ... to enable a control like this, it's (disabled, false) and NOT (enabled, true) -- that also took a bit of time to figure out. :)
The only other thing to note, much in addition to the post, is:
/*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked. Thus, it's created at that point in time
and its value must be picked fresh. Can't be put into a var and re-used
like the drop down list part of the UI control. So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL); But you can't
do this with the input part of the control. Winded explanation, yes. That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :)
*/
//district
$('#project-locationSearch-dist').combobox({
select: function (event, ui) {
//enable spn and pid drop downs
$('#project-locationSearch-pid-input').prop('disabled', false);
$('#project-locationSearch-spn-input').prop('disabled', false);
//clear them of old values
pidDDL.empty();
spnDDL.empty();
//get new values
GetSPNsByDistrict(districtDDL.val());
GetPIDsByDistrict(districtDDL.val());
}
});
All shared because it took too long to learn these things on the fly. Hope this is helpful.
You can select dropdown option value by name
// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
if( jQuery(this).text() == 'Monday' )
{
jQuery(this).attr("selected","selected");
}
});
$('select#myselect option[value="ab"]')
either can be used to get the selected option value
$('#dropdownID').on('change', function () {
var dropdownselected=$("#dropdownID option:selected").val();
});
or
$('#dropdownID').on('change', function () {
var dropdownselected=this.selectedOptions[0].value;
});