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!!
I am building a fairly complex form-- I need to copy some data between one and another and I am using jQuery to do this. The only road block I am running into is setting the state.
I have two drop downs, one us using the full state name as the value and the other is using the state abbreviation as the value. The names are the same-
so on form 1 it looks like
<option value="Illinois">Illinois</option>
and form 2 it looks like
<option value="IL">Illinois</option>
Each form has its own unique css selector. How can I set the selected value of form 2 to match what is in form 1 using jQuery?
I do not have any control over the forms, just need to manipulate the input. Have tried using a name selector in jQuery, but I'm not having any luck.
Thank you.
You can do something like this
<select id="fullName">
<option value="Maryland" data-abbr="MD">Maryland</option>
<option value="Illinois" data-abbr="IL">Illinois</option>
<option value="Delaware" data-abbr="DE">Delaware</option>
</select>
<select id="abbr">
<option value="MD">Maryland</option>
<option value="IL">Illinois</option>
<option value="DE">Delaware</option>
</select>
And your jQuery
$('body').on('change', '#fullName', function(){
var abbr = $(this).find('option:selected').data('abbr');
$('#abbr').val(abbr);
});
Try this
<form id="form1" name="form1">
<select name="states" onchange="changeselect(this)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
</form>
<form id="form2" name="form2">
<select name="states">
<option value="opt1">option1</option>
<option value="opt2">option2</option>
<option value="opt3">option3</option>
<option value="opt4">option4</option>
<option value="opt5">option5</option>
</select>
</form>
function changeselect(elem)
{
var value1 = $(elem).val();
$('#form2 select option').removeAttr('selected');
$('#form2').find('select option').each(function(){
var value2 = $(this).html();
if(value1 == value2)
{
var selected = $(this).attr('value');
$('#form2 select').val(selected);
}
});
}
If you create 2 arrays which exactly correspond with one another:
var StateNames = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
var StateAbbreviations = ['AL','AK','AZ','AR','CA','CO','CT','DE','FL','GA','HI','ID','IL','IN','IA','KS','KY','LA','ME','MD','MA','MI','MN','MS','MO','MT','NE','NV','NH','NJ','NM','NY','NC','ND','OH','OK','OR','PA','RI','SC','SD','TN','TX','UT','VT','VA','WA','WV','WI','WY'];
You can:
get the value from the first option list;
find that value's index in the first array; (hint: use indexOf)
use the same index to find out what the corresponding abbreviation is in the second array;
use the returned abbreviation to locate the correct option in the second option list
I have two select option buttons on single web page but on different tabs. I want to change the other one button value on change of any one button and assign it to some element like span in example code. All things are working perfectly but it just taking time to close dropdown when i am changing value. in firefox there is no problem
jsfiddle
My HTML Code
<select class="select one" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br><br>
<select class="select two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br><br><br>
<span class="value"></span>
JQuery
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function(){
lang = $(this).val();
$('span.value').text(lang);
if ($(this).hasClass('one')) {
$('.two').val($(this).val()).trigger('change');
}
else{
$('.one').val($(this).val()).trigger('change');
}
});
Thanks in advance
fixed jsFiddle demo
It's cause you're concurrently triggering changes. Cool that down, this is all you need:
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function () {
lang = this.value;
$('span.value').text(lang);
$('.select').val(lang);
});
You can try this instead:
var lang = $('.select.one').val();
$('.value').text(lang);
$('.select').change(function (e) {
$('.select').val(this.value);
$('.value').text(this.value);
});
The issue was .trigger() method, that was traversing up to the dom for lookup and setting the values to each elem again and again.
Check the updated fiddle.
I have a couple select elements with onchange attributes that fire a different functions. For some reason, the function is not running through. I think the problem is in the onchange attribute. Here is the HTML:
<select id="select_level" onchange="updateJumpLevelLink(this.SelectedIndex.value)">
<option value="easy">Level</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<select id="select_puzzle" onchange="updateJumpPuzzleLink(this.SelectedIndex.value)">
<option value="1">Puzzle</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="jump">Jump</div>
This is the javascript:
$(document).ready(function() {
for (i = 1; i <= 10; i++) {
$('#select_puzzle').append('<option value="'+i+'">'+i+'</option>');
}
function updateJumpLevelLink(new_value) {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+new_value+'&puzzle='+current_link.substr(current_link.indexOf('?')).split('&')[1].substr('puzzle='.length));
}
function updateJumpPuzzleLink(new_value) {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+current_link.substr(current_link.indexOf('?')).split('&')[0].substr('level='.length)+'&puzzle='+new_value);
}
});
Let me know if you see the problem here. Thanks.
i dont know what you want to do in your project, but if the case is onchange, i think this will help you, add jQuery in your JS Libraries it will help you a lot here is my example onCHange sample using jQuery
$( "#select_level" ).change(function() {
alert($(this).val());
});
Fiddle full working.
i used
$( "#select_level" ).change(function() {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+$(this).val()+'&puzzle='+current_link.substr(current_link.indexOf('?')).split('&')[1].substr('puzzle='.length));
});
$( "#select_puzzle" ).change(function() {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+current_link.substr(current_link.indexOf('?')).split('&')[0].substr('level='.length)+'&puzzle='+$(this).val());
});
Your first problem is that your functions are defined in the document ready, so it won't work because the functions technically don't exist on the global scale. You need to move it outside the document.ready().
Your second problem is that you're passing the wrong value. "this.SelectedIndex.value" should be "this.Value", otherwise it doesn't send anything into the function.
<select id="select_level" onchange="updateJumpLevelLink(this.value)">
Here's the fix: http://jsfiddle.net/yBe6J/3/
I have a dropdown menu with a really long ID, but part of it is _Country. I have a text box with a really long ID, but part of it is _State.
I'm trying to take the value from the dropdown Country and put it into the textbox State anytime someone selects an option in the Country dropdown.
Here is the JavaScript I have now. It worked fine before I tried using the wildcard, but now it does not work.
<script type="text/javascript">
document.querySelectorAll('[id*="_Country"]').onchange = replicate;
function replicate() {
var tb1 = document.querySelectorAll('[id*="_Country"]');
var tb2 = document.querySelectorAll('[id*="_State"]');
tb2.value = tb1.value;
}
</script>
querySelectorAll() returns a NodeList. Use querySelector() to get just one node.
Here's a sample (fiddle):
<select id="test_Country">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="test_State">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
(function() {
var country = document.querySelector('[id*="_Country"]');
var state = document.querySelector('[id*="_State"]');
country.addEventListener("change", function(e) {
state.value = country.value;
});
})();
</script>