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>
Related
I'm having a rather different structure of HTML and I am trying to get the selected value of a dropdown list as seen in the below code:
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker"
data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
My code returns null.
I want to get 2 as my value. As you can see, there's no value in the selected attribute.
var quantity = document.querySelector(".quantityDropdown select").getAttribute("selected");
How do I get the value 2 that's outside the option tag?
You should get the option tag, like this:
var quantity = document.querySelector(".quantityDropdown select option:checked");
You could use checked also for checkbox and radio.
This will give you the value of the selected item:
quantity = document.querySelector(".quantityDropdown select").value;
However if you want the actual content of the selected item (i.e. the text shown) outside of the option tag, use:
var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;
Use document.querySelector(".quantityDropdown select").selectedIndex
To get the selected option value you need to use two properties on the select element: options and selectedIndex to get the html option element, then you can get the value.
const dropdown = document.querySelector('.cart-quantity-picker')
console.log('selectedIndex', dropdown.selectedIndex)
console.log('options', dropdown.options)
console.log('selected', dropdown.options[dropdown.selectedIndex].value)
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker" data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
in case you need the get the 'value' :
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selValue = dropdown.options[dropdown.selectedIndex].value;
But if you want to get the text ΝΟΤ the value , you do:
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selText = dropdown.options[dropdown.selectedIndex].text;
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
For getting the value you can use
document.querySelector('#qtySelect option:checked').value;
For getting the actual text inside the option you can use
document.querySelector('#qtySelect option:checked').text;
I have a "select" on my JSP. It is fill by "Region" objects like this :
<sf:select id="regionslist" path="region" items="${regions}" itemLabel="nameRegion"/>
I want to get the attribute "Region.idRegion" from the selected one on my list.
Using this script :
$regions.on('change',
function(){
var val = $('#regionslist option:selected').val();
console.log(val)
}
)
i retrieve the object reference not the object in it self (mypackage.Entity.Region#75448e27).
I heare about the possibility to use a JSON parser to get the object on the JS script but i'm newbee concerning JS. So can samone help me ?
Thank you.
Lets pretend you got the following HTML:
<select name="my-select" id="my-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<button id="my-button">Get selected value</button>
And this is the JS to get the value of the selected option:
var form = document.getElementById('my-select'),
button = document.getElementById('my-button');
button.onclick = function (event) {
event.preventDefault();
console.log(form.value);
}
And here you can see a live demo. http://jsfiddle.net/yck69tLb/
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.
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
$(".one").change(function(){
})
I would like make - for example if i select in first position option 1 then i others selects this option should be removed.
So if i in first select i select 1 then in select second and third i have only option 2 and 3. If in second select i select 2 then in last select i have only option 3.
How can i make it? I would like use jQuery.
LIVE: http://jsfiddle.net/9N9Tz/1/
If you need to sort something, consider using something like jQuery UI sortable as a bunch of drop down menus make a really poor UX for that.
But to answer your question:
var $selects = $('.one');
$selects.on("keyup click change", function(e) {
$selects.not(this).trigger('updateselection');
}).on("updateselection", function(e, data) {
var $this = $(this);
$this.children().show();
$selects.not(this).each(function() {
var value = $(this).val();
if (value) {
$this.children('[value="' + value + '"]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select class="one">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Hiding an option works in current firefox. I'm not sure about legacy browser. Hiding, but not removing, the element makes sure that you can change your selection without having crippled your input elements.
Here you go http://jsfiddle.net/Calou/9N9Tz/6/.
When the value of the <select>s changes, just take this value and search for the <option>s with this value in the others <select>s and remove them.
$(".one").change(function(){
var val = this.value
if (val !== '') {
$(this).siblings().find('option[value=' + val + ']').remove()
}
})
// As soon as all selects have one class, you'll have to distinguish them:
$(".one").each(function() {
// Now this corresponds to one select (in the loop over all)
$(this).change(function() {
// Fix what've done before
$('option').show();
// Find every other select, find an option in it
// that has the same value that is selected in current select
// (sorry for the description)
$('.one').not(this).find('option[value=' + $(this).find('option:selected').val() +']').hide();
});
});
jsFiddle
It will be easy if you use different class for second and third select element
$(".one").change(function(){
var val = parseInt($(this).val());
$('.two,.three').find('option:contains('+val+')').remove();
});
EDIT:
Updated code to apply for multiple selects. [Thanks to all commentators and Alex for bringing it to notice ]
$(".one").change(function(){
var val = parseInt($(this).val());
$(this).siblings().find('option:contains('+val+')').remove();
});
I have a dropdownlist which is declared like this:
<select class="ddl" onchange="reloadValues(this)">
options...
</select>
There is another dropdownlist which is identical
<select class="ddl" onchange="reloadValues(this)">
options...
</select>
When I change the first dropdownlist the reloadValues function is fired. How can I also fire the reloadValues of the second dropdownlist.
If you use jquery, you can do it like so
$(document).ready(function() {
$(".ddl").change(function(ev) {
var that = this;
reloadValues(that);
$(".ddl").each(function(item, index) {
if(this !== that)
reloadValues(this);
});
});
});
Without jquery
function reloadValues(that)
{
var ddl=document.getElementsByTagName('select')
for(i=0;i<ddl.length;i++)
{
if(ddl[i].className=='ddl')
{
if(that==ddl[i])
{
alert("This element triggered the event and contains "+ddl[i].length+" items!");
}
else
{
// Do something
alert("This element didn't trigger the event and contains "+ddl[i].length+" items!");
}
}
}
}
Here is a fiddle.
Unfortunately you cannot compare the actual functions as the onevent function is unique per element.
It would look something like
function onchange()
{
reloadValues(this)
}
It would be super elegant if we could loop through all selects and compare the reloadValues function inside the unique per element onchange function to see if it's the same function or not.
But a separate function would be assigned to each element, so they cannot be directly compared. You could compare the string values by element1.onchange+'' == element2.onchange+'' but you may get unexpected results in some browsers, as they will format the string value differently sometimes.
Here is an example that works by checking the string value of the attribute. E.g. it performs the same routine on all elements that have the value reloadValues(this) set to their onchange attribute.
In this example, changing the index of one select changes any select on the page to the same index so long as it has the reloadValues(this) text exactly in its onchange attribute. In this example, it doesn't matter what the id or class attributes are of the selects.
However, tagging or changing the text value of the onchange attribute will affect it.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
function reloadValues( XXX ) {
var allSelects = document.body.getElementsByTagName("select");
for( var i = 0; i < allSelects.length; i++) {
if(allSelects[i].attributes["onchange"].value == "reloadValues(this)") {
allSelects[i].selectedIndex = XXX.options.selectedIndex;
}
}
}
</script>
<body>
<select class="ddl" onchange="reloadValues(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="fsfsfs" onchange="reloadValues(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="ddl" onchange="reloadValues(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="ddl" onchange="reloadValues(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>