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>
Related
Within my below example, I've a little select and a button. When I change the select value to e.g., 5 and press the button to reload the HTML select, I am wondering now why the displayed value inside the select is not reset after the jQuery load event, even if I set selected="selected" inside my HTML code?
(function($) {
$(document).ready(function() {
$('button').click(function() {
let select = $('#select');
console.log(`Value before: ${select.val()}`);
$('#wrapper').load(window.location.href + " #wrapper", function() {
let select = $('#select');
console.log(`Value after: ${select.val()}`);
});
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<select id="select" name="quantity">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<button>Load</button>
I have a <select> tag and I want it to change the value of a hidden input when an option is selected.
What I thought was to use this:
<input type=hidden value=Ineedtochangethis name=asdf>
<select><option onselect="stuff()">Option 1 is selected</option>...</select>
And then this
function stuff() {
document.getElementsByName("asdf").value=opt1slct;
}
Of course, it doesn't work. What can I do to get a similar effect?
please check following code:
<select onChange="jsFunction()" id="selectOpt">
<option value="1" >1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
if(myselect.options[myselect.selectedIndex].value == 1){
alert('hide');
}else{
alert('show');
}
}
By using the selectedIndex property (and potentially the options one as well) of your select element.
<input id="yourHiddenField" type="hidden"/>
<select onchange="stuff(this);">
<option>Option 1 is selected</option>
</select>
And the JavaScript:
function stuff(yourSelectElement){
document.getElementById('yourHiddenField').value = yourSelectElement.options[yourSelectElement.selectedIndex].innerHTML;
}
And if you want to store just one number in your hidden field, use the value attribute on your option tags like so:
<option value="1">Option 1 is selected</option>
Then the JS changes like this:
document.getElementById('yourHiddenField').value = yourSelectElement.options[yourSelectElement.selectedIndex].value;
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 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>
<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();
});