I want to find if a option is in the dropdown and use its value.
this is NOT when selected. I purely want to scan the list for Procedures and get the value from it.
<select class="FormDropDown " id="procedure-category-fld" name="procedure-category-fld">
<option value=""></option>
<option value="4">Cause</option>
<option value="5">Disorder</option>
<option value="6">Procedure</option>
</select>
You can use .filter():
var value = $('#procedure-category-fld option').filter(function (idx, ele) {
return ele.textContent == "Procedure";
}).val();
console.log(value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="FormDropDown " id="procedure-category-fld" name="procedure-category-fld">
<option value=""></option>
<option value="4">Cause</option>
<option value="5">Disorder</option>
<option value="6">Procedure</option>
</select>
You can take the option elements from within the select you have and extract their value/text using jquery:
$(function() {
$('#procedure-category-fld option').each(function(i, el) {
console.log($(el).val(), $(el).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="FormDropDown " id="procedure-category-fld" name="procedure-category-fld">
<option value=""></option>
<option value="4">Cause</option>
<option value="5">Disorder</option>
<option value="6">Procedure</option>
</select>
Related
I have this Fiddle : https://jsfiddle.net/Ardee12/tL643rjq/3/
My problem is, I always get the same options at the third select from second select (vice versa), after I select an option from the first one. I need to stick for their own option (second and third select), but still have the populated function from their "rel" attribute. Can anyone please help me?
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
You need to treat each of the kidSelect individually. Loop through each of them at the beginning and store a clone of their own options in each instance.
Then when you change main select, filter each set separately
// store a clone of each kidSelect options on page load
$('.kidSelect').each(function() {
$(this).data('options', $(this).children().clone());
});
$(".mainSelect").change(function() {
var rel = this.options[this.selectedIndex].getAttribute('rel');
// filter each kids options and set in place
$('.kidSelect').html(function() {
return $(this).data('options').filter('[rel=' + rel + ']').clone();
});
// trigger the change on page load also to do initial filtering
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
I'm not entirely sure what you're trying to do but here is a guess.
I think you only want to effect the second select with the changes. For that you need to adjust your selector. It currently selects both selects.
$(document).ready(function () {
$(".mainSelect").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('.js-kidSelect option').clone());
}
var rel = this.options[this.selectedIndex].getAttribute('rel');
var options = $(this).data('options').filter('[rel=' + rel + ']');
$('.js-kidSelect').html(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
<option rel="1">Fruit</option>
<option rel="2">Animal</option>
<option rel="3">Bird</option>
<option rel="4">Car</option>
</select>
<select class="kidSelect js-kidSelect">
<option rel="1">Banana</option>
<option rel="1">Apple</option>
<option rel="1">Orange</option>
<option rel="2">Wolf</option>
<option rel="2">Fox</option>
<option rel="2">Bear</option>
<option rel="3">Eagle</option>
<option rel="3">Hawk</option>
<option rel="4">BWM</option>
</select>
<select class="kidSelect">
<option rel="1">AAAAA</option>
<option rel="2">BBBBB</option>
<option rel="3">CCCCC</option>
</select>
I need your help. So what I want to do is when a user select an option from one select, automatically hide an option from another multiple select.
Example:
if a user choose Car from select A, I want the car option from the select B to be automatically removed or hidden.
select A:
<select name="my_option_one" required id="id_my_option_one">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
Select B:
<select name="my_option_two" id="id_my_option_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
This is what I have tried but none of it worked.
$(document).ready(function() {
$("#id_my_option_one").change(function() {
if ($(this).val() === 'C') {
$("#id_my_option_two option[value='C']").options[0].remove();
$('select[name=my_option_two] option:eq(1)').hide();
$("#id_my_option_two option[value=" + 'C' + "]").hide();
$("#id_my_option_two option[value='C']").attr('disabled','disabled').hide();
}
});
});
function my_optionsChange() {
$("#id_my_options_two option").show(); //.css("display", "block");
$("#id_my_options_two option[value='" + $("#id_my_options").val() + "']").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="my_options" required id="id_my_options" onchange="my_optionsChange()">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
I made an example which is longer because it's split into parts so you understand better what is going on.
I tried to name the variables so that it's clear what they are, but if you have any questions, please ask in the comments.
Let me know if this works for you.
const firstSelect = $('#id_my_options')
const secondSelect = $('#id_my_options_two')
firstSelect.on('change',function() {
const selected = $(this).find('option:selected');
const selectedValue = selected.val()
const secondOptions = secondSelect.children();
secondOptions.each(function() {
const secondValue = $(this).val()
secondValue === selectedValue ? $(this).hide() : $(this).show()
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="Choose" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options" id="firstblock" onchange="disable(2,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options" id="secondblock" onchange="disable(1,this.value);">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<script>
function disable(needtoblock,val){
console.log(needtoblock+" "+val);
if(val != ""){
if(needtoblock == 1){
$("#firstblock option[value='"+val+"']").prop('disabled', true);
}else if(needtoblock == 2){
$("#secondblock option[value='"+val+"']").prop('disabled', true);
}else{
}
}else{
$("#secondblock option").prop('disabled', false);
$("#firstblock option").prop('disabled', false);
}
}
</script>
This is how code could look, definetly you need to update and make it suitable for you.
I know, this is a bit late, but maybe it is of interest to someone out there. I understood the demand of OP so, that the hiding of options was to be done in any direction, or potentially spanning over multiple selector boxes. The following script will do exactly that: if you select an option in one selector it will go through the other selectors of the defined group $grp (by doing $grp.not(this).each((i,trg)=> ...)) and will hide/show all options there, depending of whether thay have been selected elsewhere already.
The $(to).toggle(...) method sets the visibility of each option (to) within trg, based on the existence of selected options with the same value in the sibling selectors of trg (again, limited to the current group $grp).
Maybe the script is a little too condensed for easy reading but it shows how much you can achieve with very little code when you use the power of jQuery.
const $grp=$('select[id^=id_my_options]') // define the selector group
$grp.on('change',function(ev){ // bind the change event ...
$grp.not(this).each((i,trg)=> // work on each sibling-selector (trg) of clicked
// selector (this), but only within jquery
// selection $grp
$('option[value!=""]',trg).each((j,to)=> // for all options of sibling-selectors of
// trg (within jquery selection $grp):
$(to).toggle($grp.not(trg).find('option[value='+to.value+']:selected').length==0))
// toggle the visibiltiy of that option
)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
<option value="" selected>Choose..</option>
<option value="C">Car</option>
<option value="H">House</option>
<option value="A">Airplane</option>
</select>
<select name="my_options_two" id="id_my_options_two" multiple="multiple">
<option value="C">Car2</option>
<option value="H">House2</option>
<option value="A">Airplane2</option>
</select>
<select name="my_options_three" id="id_my_options_three" multiple="multiple">
<option value="O">yet another option</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>
<br><br>
<select name="my_options_four" id="id_your_options_four" multiple="multiple">
<option value="O">and some unrelated options</option>
<option value="C">Car3</option>
<option value="H">House3</option>
<option value="A">Airplane3</option>
</select>
How can I change the value of a select list with the value of another select list
<select class="main-filter" id="Test1" name="Test1"><option value="">Select Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Need to replace #ReplaceThisText# with value selected from above select box
<select id="selectfilter" name="selectfilter" class="form-control main-filter">
<option value="">Sort Products</option>
<option value="/?id=na&selectfilter=hl&Type=#ReplaceThisText#">Chnage Value</option>
</select>
I have tried code from this link Change the Text of a Option with jQuery
and jquery how to find and replace a selected option that has a certain value
but cannot seem to get it to work
My code is
$('#Test1').change(function () {
sessionStorage.setItem("Test1", $(this).val());
$('.main-filter :selected:contains("#ReplaceThisText#")').val($(this).val());
location.href = $(this).val();
});
:contains will look at the .text() value - but your #ReplaceThisText# is not in the .text() value - so you'll need to use .filter() to find it instead:
Adding some console.logs so you can see what's happening and updated the .val(newval) code to make the replacement.
$('#Test1').change(function() {
var newval = $(this).val();
console.log("before", $(".main-filter :contains('Change Value')").val())
var opt = $('.main-filter option').filter(function() {
return $(this).val().indexOf("#ReplaceThisText#") >= 0;
});
console.log("opt length", opt.length);
opt.each(function() {
$(this).val($(this).val().replace(/#ReplaceThisText#/gi, newval));
});
console.log("after", $(".main-filter :contains('Change Value')").val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="main-filter" id="Test1" name="Test1">
<option value="">Select Option</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select id="selectfilter" name="selectfilter" class="form-control main-filter">
<option value="">Sort Products</option>
<option value="/?id=na&selectfilter=hl&Type=#ReplaceThisText#">Change Value</option>
</select>
I have this issue: In my form there are 4 dropdownlist and when the 1st (category1) or 2nd (software1) dropdown list is selected, the 3th (category2) and 4th (software2) must be disabled.
For this issue I find this script at disable-second-dropdown-if-the-first-is-not-selected but I do not trust to modify this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<script type="text/javascript">
var setEnabled = function(e) {
var name = this.name.replace(/1/, '2'); //get name for second drop down
$('select[name=' + name + ']')
.prop('disabled', 0 === this.selectedIndex) // disable if selected option is first one
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
</script>
How to modify this?
Thanks
I think the main thing you want is to flip === for !==
However, to get this working on a matrix, where both top inputs trigger enabling/disabling of both bottom inputs, you'll need to test both on change of either.
var setEnabled = function(e) {
var selected = $('select[name=cat1]').prop('selectedIndex') > 0 || $('select[name=soft1]').prop('selectedIndex') > 0;
$('select[name=cat2], select[name=soft2]').prop('disabled', selected); // disable if selected option is first one
if (selected) {
$('select[name=cat2], select[name=soft2]').prop('selectedIndex', 0)
}
};
$(function() {
$('select[name=cat1], select[name=soft1]')
.on('change', setEnabled)
.trigger('change'); // trigger on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</script>
category1
<select name='cat1'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software1
<select name='soft1'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
<br />
category2
<select name='cat2'>
<option value='0'>Select one</option>
<option value='1'>little</option>
<option value='2'>good</option>
</select>
software2
<select name='soft2'>
<option value=''>Select one</option>
<option value='W'>Word</option>
<option value='E'>Excel</option>
<option value='PP'>Power Point</option>
</select>
i have 7 dropdown boxes in html. They will all get populated the same data. What I am trying to do is when the first dropdown is selected it would remove the selected item from the next dropdown. So, if you Have data: A,B,C,D,E,F,G,H,I in one dropdown if I select B in the first drop down then in the next dropdown it should only show A,C,D,E,F,G,H,I and so on up to 7 dropdowns. I dont know what would be the best way to approach this in JavaScript. Thanks for your help in advance
Sample Code:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
You could use attribute targeting. I'll assume jQuery, because why not.
$("select").change(function() {
$(this)
.next("select")
.find("option").removeAttr("disabled")
.end()
.find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
})
Again, this is just an approach so if you post code we can make better guesses.
Updated
Here's the JSFiddle: http://jsfiddle.net/FaVdu/1/
How about something like this jsFiddle example? The selected options of each drop down is disabled in every other one. This allows you to change an options without removing it.
$('select').change(function() {
var ary = new Array();
$('select option:selected').each(function() {
if ($(this).val().length > 0) {
ary.push($(this).val());
}
});
$('select option').each(function() {
if ($.inArray($(this).val(), ary) > -1) {
$(this).attr('disabled', 'disabled');
} else {
$(this).removeAttr('disabled');
}
});
});
Hi here the solution for above question check it
<script type="text/javascript">
function cleanOptions(selectedOption) {
var val = selectedOption.options[selectedOption.selectedIndex].value;
if(val!="select"){
//Clear all items
$("#drop2 > option").remove();
//Add all options from dropdown 1
$("#" + selectedOption.id + "> option").each(function () {
var opt = document.createElement("option");
opt.text = this.text;
opt.value = this.value;
document.getElementById("drop2").options.add(opt);
});
//Remove selected
$("#drop2 option[value='" + val + "']").remove();
}
}
</script>
<select id="drop1" onchange="cleanOptions(this)">
<option value="select" selected>---select---</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" >Audi</option>
</select>
<select id="drop2">
<option value="select" selected>---select---</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" >Audi</option>
</select>