how can i check if all select options are disabled except for the one with the value="0"?
Here is my code:
<select name="my-select" id="my-select">
<option value="0">apple</option>
<option value="1" disabled>orage</option>
<option value="2" disabled>pear</option>
<option value="3" disabled>banana</option>
</select>
What I was thinking was:
if(#my-select options disabled except for option value="0") {
console.log(option value="0" is the only one that is enabled);
}
1st: You need to check for all enabled options by using $('#my-select option:not(:disabled)')
2nd: check How many of it is enabled using .length
3rd: check if its value attribute is 0
var enabled = $('#my-select option:not(:disabled)');
if(enabled.length === 1 && enabled.attr('value') == "0") {
console.log('option value="0" is the only one that is enabled');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my-select" id="my-select">
<option value="0">apple</option>
<option value="1" disabled>orage</option>
<option value="2" disabled>pear</option>
<option value="3" disabled>banana</option>
</select>
you can use javascript or jQuery.I use of jQuery, Like this:
$(document).ready(function(){
var counter = 0;
$('#my-select option:enabled:not([value=0])').each(function(){
counter++;
})
if(counter < 1)
alert('option value="0" is the only one that is enabled');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="my-select" id="my-select">
<option value="0">apple</option>
<option value="1" disabled>orage</option>
<option value="2" disabled>pear</option>
<option value="3" disabled>banana</option>
</select>
Related
I would like to have the output in select box 2 in such a way that if I choose something with B in select box 1, everything that begins with B in select box 1 is output. At the moment only one is issued and the others are not
$('#select1').on('change', () => {
$('#select2 option').hide();
$('#select2 option[value^="' + $('#select1').val() + '" ]').show();
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="standard" size="1" id="select1">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
<option value="8">I</option>
<option value="9">J</option>
<option value="10">K</option>
<option value="11">L</option>
<option value="12">M</option>
</select>
<select name="standard" size="1" id="select2">
<option value="0" style="">Aal in Aspik</option>
<option value="1" style="display: none;">Bierwurst</option>
<option value="2" style="display: none;">Berliner (Faschingskrapfen)</option>
<option value="3" style="display: none;">Auberginenröllchen auf Tomaten-Zimt-Sugo</option>
</select>
Since your selector #select2 option[value^="' + $('#select1').val() + '" ] will only match one options, so the other options that have greater value still not be showed. You could try to use jQuery's filter
$('#select1').on('change', () => {
var value1 = $('#select1').val();
var option2 = $('#select2 option');
$('#select2').val(value1).change();
option2.hide();
option2.filter(function() {
return parseInt($(this).val()) >= parseInt(value1);
}).show();
}).trigger('change');
See demo here
Your issue is here:
[value^="' + $('#select1').val() + '" ]
If you debug select val, you'll see it's 1 for B as it takes the option value:
<option value="1">B</option>
To compare texts, you need to get the text of the current selected option, eg:
$('#select1 option:selected').text()
you can then use .filter to compare this with the first letter of each option in the second select:
$('#select2 option').filter((i,e)=> $(e).text().substr(0,1) == $('#select1 option:selected').text()).show();
Updated snippet:
$('#select1').on('change', () => {
$('#select2 option').hide();
$('#select2 option').filter((i,e)=> $(e).text().substr(0,1) == $('#select1 option:selected').text()).show();
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="standard" size="1" id="select1">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
<option value="8">I</option>
<option value="9">J</option>
<option value="10">K</option>
<option value="11">L</option>
<option value="12">M</option>
</select>
<select name="standard" size="1" id="select2">
<option value="0" style="">Aal in Aspik</option>
<option value="1" style="display: none;">Bierwurst</option>
<option value="2" style="display: none;">Berliner (Faschingskrapfen)</option>
<option value="3" style="display: none;">Auberginenröllchen auf Tomaten-Zimt-Sugo</option>
</select>
I have 2 select boxes where first is all user selectable but in second selected option is dependant on first select box. Selected value in first option box matches option's class in second select box but values are different. I imagine i need something like:
$('#territory').change(function() {
if($(this).val() == 'EU')
{
$('#territory2').class('EU');
}
How do i select selected option by class name? (There might be more than 1 option with the same class name but it just needs to select any of them).
<select id="territory" name="territory"">
<option value="EU">A</option>
<option value="GB">B</option>
<option value="ALL">C</option>
</select>
<select id="territory2" name="territory2">
<option value="1" class="EU">A</option>
<option value="2" class="GB">B</option>
<option value="3" class="ALL">C</option>
<option value="4" class="ALL">D</option>
</select>
Set the value attribute of the desired <option> element on the value attribute of the <select>:
const territory = document.getElementById("territory"),
territory2 = document.getElementById("territory2");
territory.addEventListener("input", ev => {
territory2.querySelector("."+territory.value).selected = true;
});
<select id="territory" name="territory">
<option value="EU">A</option>
<option value="GB">B</option>
<option value="ALL">C</option>
</select>
<select id="territory2" name="territory2">
<option value="1" class="EU">A</option>
<option value="2" class="GB">B</option>
<option value="3" class="ALL">C</option>
<option value="4" class="ALL">D</option>
</select>
Note that this will only select the first option with that class.
I recommend data-attribute:
$('#territory').on("change", function() {
const territory = $("option:selected", this).data("territory");
$("#territory2").val(territory)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="territory" name="territory">
<option value="" data-territory="0">Please select</option>
<option value="EU" data-territory="1">A</option>
<option value="GB" data-territory="2">B</option>
<option value="ALL" data-territory="3">C</option>
</select>
<select id="territory2" name="territory2">
<option value="0">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I have n select array like this:
<select class="form-control" name="upporder['1']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
<select class="form-control" name="upporder['2']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
.
.
.
<select class="form-control" name="upporder['n']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
user can choose all select as 'BOTTOM'
But I want user only can choose one 'TOP'
for example, If choose 'TOP',all of other select be 'BOTTOM'
I try write it via jQuery:
$("[name=upporder]").on('change',(function(e) {
e.preventDefault();
if(this.val() == 2)
// do not do anything
elseif(this.val() == 1)
//change all other 'select' value (with same name) to '2' except current 'select'
}
Try this:
$(".form-control").change(function(){ // handle click event of all selectbox
if($(this).val() == '1') { // check if TOP is selected
$(".form-control").val('2'); // first set all select box value to 2
$(this).val('1'); // set current selectbox to 1
}
});
you need to loop through lists by using .each()
$("select.form-control").on('change',function(e) {
e.preventDefault();
if($(this).val() == '2'){
// do not do anything
}else if($(this).val() == '1'){
//change all other 'select' value (with same name) to '2' except current 'select'
$("select.form-control").not($(this)).each(function(){
$(this).find('option[value="2"]').prop('selected', true);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="upporder['1']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
<select class="form-control" name="upporder['2']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
<select class="form-control" name="upporder['n']">
<option value="1">TOP</option>
<option value="2" selected>BOTTOM</option>
</select>
I need help on something really simple.
I have 2 dropdown boxes on a form:
<select name="OfficeLocation" >
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
The second one is "Read Only"
All I need to know is how can I change the value of "OfficePhone" by changing the value of "OfficeLocation"? using either a simple JavaScript or JSP Command
Thanks
You are able to use a script like the following:
<script>
menu1 = document.getElementsByName('OfficeLocation')[0];
menu2 = document.getElementsByName('OfficePhone')[0];
menu1.onchange = function(){
menu2.value = menu1.value;
}
</script>
Here you are using the onchange event to initiate a function that make the value on the second menu menu2 equals to the selected value of the first menu menu1.
An online demo is here
Notice that: the script should be placed after your elements.
You gonna need an event handler function for the OfficeLocation select and an id for the second select.
<select name="OfficeLocation" onchange="eHandler">
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone" id="oPhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
You have to implement your event handler in your script, like this:
function eHandler(){
var secondSelect = document.getElementById('oPhone');
secondSelect.value = //the value you want to be selected
}
I want to change option values as per the input value. For example if i put value02 in input then the select should show options having title="value02" other options will hide.
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Please help
I think this is the ANSWER you looking for
WORKING:DEMO
HTML
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">01 1</option>
<option value="2" title="value01">01 2</option>
<option value="1" title="value02">02 1</option>
<option value="2" title="value02">02 2</option>
<option value="1" title="value03">03 1</option>
<option value="2" title="value03">03 2</option>
</select>
JS/JQuery
$(document).mouseup(function (e)
{
var container = $("select");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#program option[title='value01']").show();
$("#program option[title='value02']").show();
$("#program option[title='value03']").show();
}
});
$("select").click(function()
{
var getVal = $("input[type=text]").val();
if(getVal == "value01")
{
$("#program option[title='value02']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value02")
{
$("#program option[title='value01']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value03")
{
$("#program option[title='value01']").hide();
$("#program option[title='value02']").hide();
}
else
{
}
});
Assuming your question means that you want to hide <option> tags that don't match the title that the user typed (so only the matching options are available in the <select>), you can do it like this:
You can monitor changes to the fname field and upon each change see if the current value of the fname field matches any of the titles and, if so, hide the options that don't match, leaving only the matching options. If none match, then show all the options.
$("#fname").on("input", function() {
var option;
if (this.value) {
var sel = $("#program");
option = sel.find('option[title="' + this.value + '"]');
}
if (option && option.length) {
// show only the matching options
sel.find("option").hide();
option.show();
} else {
// show all options
sel.find("option").show();
}
});
Try this. It disables all the options. And add new option that is entered from input field. You need to press enter after entering value in input field.
$(document).ready(function() {
$('#fname').bind('keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
$("#program").append($('<option/>', {
value: $("#fname").val(),
title: $("#fname").val(),
text: $("#fname").val()
}));
$("#program option[value!=" + $("#fname").val() + "]").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Use jquery. Get the value of the input and search the option for that value and set the value. Try with -
$('#program').val($('#program option[title=' + $('#fname').val() + ']').val())
Try this...
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
$('#fname').on('blur', function(){
var value=$("#fname").val();
$('#program').val($('#program option[title=' + value + ']').val());
});
demo:https://jsfiddle.net/qrecL29u/2/
And without jQuery
var field = document.getElementById('fname'),
select = document.getElementById('program');
field.addEventListener('keyup', function(evt) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].title !== field.value) select.children[i].style.display = 'none';
else select.children[i].style.display = 'block';
}
});
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>