I have an array of select fields all having the same list of option value. What i am trying to get is, if a value is selected in any of the field, it should not show on the other. Below is an example code. For example, if I am having four select fields, if I select 'a' on first field, the value "a" should not appear on the next select field. Same with other values of "b", "c" and "d".
I am trying to use java script for the same. I am in learning phase. help will be really appreciated. Thanks
<select name='list' id='list_1'>
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='d'>d</option>
</select>
Try this code that i have written .. Hope should help
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<select>
<option value="0"> </option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
$(document).on('change', 'select', function() {
$(this).find('option:selected').addClass('keepit');
$('option[value="' + this.value + '"]:not( .keepit)').remove();
});
https://jsfiddle.net/av46dbo1/
Since you don't want to destroy the data, you need to hide the options.
That's tricky because you have multiple state to combine.
you can make several IF comparisons, hard-code a table of combos for each group and options (yuck), or use a mountain of JS to solve this, but i think that CSS is better.
A simple way to accomplish this is to use CSS; multiple classes on a single element that translate your many states into rules that can be applied instantly and generically (without hard-coding ids or names).
<select name='list' id='list_1'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_2'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_3'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<select name='list' id='list_4'>
<option value='a'>a</option> <option value='b'>b</option>
<option value='c'>c</option> <option value='d'>d</option>
</select>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script>
var combos=[], // store the css we need to define hide/show rules
classes= new Array($("select").length); //a place to store many states
$("select").each(function(i,e){ // for every drop down,
$(this).change(function(){ // when it changes:
classes[i]=this.value; // update array with changed value in right slot
document.body.className=classes.join(" "); // update body class with array
});
});
$("select option[value]").each(function(n, a){ // make css to hide each option if body has the same class:
combos.push( "body."+a.value+" option[value='"+a.value+"'] ");
});
//append the dynamic CSS to the head:
$("head").append("<style> "+combos+"{ display: none; }</style>");
</script>
online demo: http://pagedemos.com/pe2uf5vkx9vh/
if you want to restrict this functionality to certain drop downs, give them a class like <select class=hider and change $("select to $("select.hider in the code above.
if you have values with spaces, you'll need fancier CSS selectors than class, like data-state="|a b|hello world|honda crv|" attribs that you can delimit and hit with partial attribute selectors (body[data-state*='|hello world|']...), but the same pattern can work with many and more complex states.
Fiddle
$(function(){
$('#list_1').change(function(){
var valueToRemove=$(this).val();
$('select').not('#list_1').each(function(){
var currentId=$(this).prop('id');
$("#"+currentId+" option[value="+valueToRemove+"]").remove();
})
})
})
Related
I have these html tags:
<select name="ct" id="ct">
<option value="-1">Tutte</option>
<option value="1">Da verificare</option>
<option value="2">Verificate</option>
<option value="3">Approvate</option>
<option value="4">Respinte</option>
<option value="5">Pubblicate</option>
<option value="6">Scadute</option>
<option value="7">Proposte</option>
<option value="8">Rifiutate</option>
<option value="9">Ritirate</option>
<option selected="selected" value="7,8,1">Proposte / Rifiutate / Da verificare</option>
</select>
I want to change the attribute value of the selected option (which contains "7,8,1") to value="-1", so it will look like:
<option selected="selected" value="-1">Proposte / Rifiutate / Da verificare</option>
I tried with:
$dom_richieste->getElementsByTagName('options')->getAttribute('value').value="-1";
But that's not working...
You can use $("#ct option[value='7,8,1']").val("-1");
$("#ct option[value='7,8,1']").val("-1");
console.log($("#ct").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ct" id="ct">
<option value="-1">Tutte</option>
<option value="1">Da verificare</option>
<option value="2">Verificate</option>
<option value="3">Approvate</option>
<option value="4">Respinte</option>
<option value="5">Pubblicate</option>
<option value="6">Scadute</option>
<option value="7">Proposte</option>
<option value="8">Rifiutate</option>
<option value="9">Ritirate</option>
<option selected="selected" value="7,8,1">Proposte / Rifiutate / Da verificare</option>
</select>
I suggest you to check how you created this drop down, and if possible replace there instead after creating drop down.
If I understand correctly you are need something like:
foreach ($dom->getElementsByTagName('option') as $item) {
if ($item->getAttribute('selected') == "selected")
$item->setAttribute("value", "-1");
}
This way you pass on your option items and set the value of the selected ones
You have used getElementsByTagName('options') in your code and no tag available with name options. Instead you should use correct tag name option.
<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>
it by default shows orange in the box but I want Grapes in a box. Please help
Thanks
For your HTML Dropdown
<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>
Using JS You can use below code to get desired result
document.getElementsByClassName("fruits")[0].selectedIndex = 2 // will select Grapes
Just assign index 0,1..to length of dropdown to get selected value
If you want to use jQuery, then do it like this
$("select.fruits").val("Grapes");
Javascript
var element = document.getElementsByClassName('fruits')[0];
element.value = valueToSelect;
HTML Code:
<select class=fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">admin</option>
<option value="Kiwi">Kiwi</option>
</select>
javascript:
$('.fruits option:eq(2)').attr('selected', 'selected');
eq(nth), you can pass index which option you want to select by default. it's start from 0 to n-1.
You can use the selector :nth-child() index starts at 1
You can use method .eq() index starts at 0
$(".fruits").find('option').eq(0).css('color', 'blue')//index starts at 0 so first option will be blue
$(".fruits").find('option:nth-child(2)').css('color', 'red');//index starts at 1 so second option will be red
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">admin</option>
<option value="Kiwi">Kiwi</option>
</select>
You can use the selectedIndex property:
$('select.fruits').prop('selectedIndex', 2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="fruits">
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Grapes">Grapes</option>
<option value="Kiwi">Kiwi</option>
</select>
The code above will select the third option, since the index starts from 0.
In 2023, without jQuery, the correct snippet is this:
document.getElementsByClassName("fruits").selectedIndex = 2
I need to change the 3rd field automatically depending on first two field. ( it would be best if I change 3rd field and then first 2 fields changes also )
I need a Jquery solution. Anyone can help me please?
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="carcar">car car</option>
<option val="carphone">car phone</option>
<option val="carboll">car boll</option>
<option val="phonecar">phone car</option>
<option val="phonephone">phone phone</option>
<option val="phonecarboll">phone boll</option>
</select>
Is this what you're looking for?
$(document).ready(function() {
// on change for the 3rd select
$("#ChangeItAutomatically").on("change", function() {
// get the value and split on space
var value = $(this).val().split(" ");
// select the other two selects based on the values
$("#First").val(value[0]);
$("#Second").val(value[1]);
});
// on change for the first two selects
$("#First, #Second").on("change", function() {
// set the value of the 3rd select based on the combination of values of the first two
$("#ChangeItAutomatically").val($("#First").val() + " " + $("#Second").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="First">
<option val="car">car</option>
<option val="phone">phone</option>
</select>
<select id="Second">
<option val="car">car</option>
<option val="phone">phone</option>
<option val="boll">boll</option>
</select>
<hr>
<select id="ChangeItAutomatically">
<option val="car car">car car</option>
<option val="car phone">car phone</option>
<option val="car boll">car boll</option>
<option val="phone car">phone car</option>
<option val="phone phone">phone phone</option>
<option val="phone boll">phone boll</option>
</select>
i founded more example about this, but when i try , it's not work.
$(window).load(function () {
$("#country").html('Please select in here');
});
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Please see it and tell me "Why it's not working?".Thank guys
It's impractical to replace the whole content between <select id="country"> and </select> with 'Please select in here' ? If you just want to replace the first option's content, then try this.
$(window).load(function () {
//$("#country").html('Please select in here');
});
$(document).ready(function() {
//$("#country").html('Please select in here');
$("#country").find("option:first-child").html('Please select in here');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Not quite sure what you want, but if you want to add another option just append/prepend new option into select like so:
$(window).load(function () {
$("#country").prepend('<option value="" selected>Please select in here</option>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
Please select in here:
<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
You can't add text in the select. You need to add in front of it.
If you really want to add the text after load, put one more div in front of the select to control
I am not entirely sure what you are trying to do, but if you just want to change the default text, you probably are looking for something like this:
<select id="country">
<option value="None" selected>Please select in here</option> <!-- set the default selection -->
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>
and then the JS to set a new value would be:
$(window).load(function () {
$("#country").val('China');
});
Bit confuse what you trying to achieve
To Pre append
$('#country').prepend('<option>Please select in here</option>');
To dynamically Select:
$('#country').val("None")
Add new Option:
$('#country').append(new Option('Foo', true));
I want to get the <option> values and text from a <select> element #myselect, and add it to another <select> element #newselect. The value and text passed to the second select element, #newselect, must also be disabled. I'd like support for IE 8+.
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
Take the above, disable them and add them to the below:
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>
Since you included the jQuery tag, here's a jQuery solution.
As long as you're using jQuery 1.x, IE8 support is included.
$('#myselect option').each(
function() {
$(this).prop('disabled', true).appendTo('#newselect');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>
You already have jQuery answer. So now if you are curious how it can be in pure javascript, here it is. As you can see, it's a little more verbose of course:
var mySelect = document.getElementById('myselect'),
newSelect = document.getElementById('newselect');
while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>