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.
Related
I have found a huge amount of problem-related to my problem. Actually, I have the solution about "without holding Ctrl button to select the option."
For better reference: Selecting multiple from an html select element without using ctrl key
I got the best solution in the following question. But the problem is that I need a function having both
1. without holding the Ctrl button
2. limited the selection option less than 3
Here the code for HTML select element without using ctrl key
window.onmousedown = function (e) {
var el = e.target;
if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
e.preventDefault();
// toggle selection
if (el.hasAttribute('selected')) el.removeAttribute('selected');
else el.setAttribute('selected', '');
// hack to correct buggy behavior
var select = el.parentNode.cloneNode(true);
el.parentNode.parentNode.replaceChild(select, el.parentNode);
}
}
select{
width: 200px;
height: 200px;
}
<select multiple>
<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>
</select>
Here the code for limited the option with holding ctrl button:
$("select").on('change', function(e) {
if (Object.keys($(this).val()).length > 3) {
$('option[value="' + $(this).val().toString().split(',')[3] + '"]').prop('selected', false);
}
});
select{
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select multiple>
<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>
</select>
But I can't make the two scripts together. I have tried but there only work only "without holding ctrl" script.
Note: I have found other script in jquery to activate "without holding ctrl" in multi-select option. But they didn't send data correctly. The above pure JS is perfect for me :)
Thanks
Your first script allows for multiple selections to be made by clicking without and with CTRL. You don't need to combine anything.
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 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>
I have three identical drop downs. I want to select a value from drop1 and have that value excluded from drop2. Then the selections in drop3 should exclude 1 & 2. Any ideas?
<select name="drop1">
<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>
<select name="drop2">
<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>
<select name="drop3">
<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>
You can use change event and remove selected elements from the dom
$('select[name=drop1]').change(function() {
var drop2 = $('select[name=drop2]').empty().hide();
var exclude = $(this).val();
var size = $(this).children().length;
for (var i=0; i<size; ++i) {
if (i != exclude) {
drop2.append('<option value="' + i + '">' + i + '</option>';
}
}
});
if you have more complex example and you need value based explude you can create a clone.
var clone = $('select[name=drop2]').clone();
$('select[name=drop1]').change(function() {
var copy = clone.clone();
copy.find('option[value=' + $(this).val() + ']').remove().end();
$('select[name=drop2]').replaceWith(copy);
});
Depending on how comfortable you are with PHP, or AJAX you have two solutions.
If you are more comfortable with PHP you could have a user submit the data from one select form and then using if statements like
if $value != '1'{
echo '<option value="1">1</option>';
}
and do that for each field in the second form; then replicate that for the third form.
The smoother looking solution would be using AJAX to use a listener to see when a user clicks a field a java value is set as that field and using a similar "if then show" method on the java-script variable to hide the fields that contain that value in the other forms.
Also one of the easiest solutions would be allowing multiple-selections (Assuming you are ok with the look of using one form & the values between the forms are the same like the example you gave above)... That example being:
<select id="my_num" name="my_num" size="5" multiple="multiple" >
<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>
<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();
});