Hi all I have two select fields, on select field first if user select option value one or two then in select field of second all options are visible but if it select option two in first then option two want to remove from select id second. Following is my code:
<script type="text/javascript">
var index3,str;
</script>
<select id="first" onchange="chk();">
<option value = "one">one</option>
<option value = "two">two</option>
<option value = "three">three</option>
</select>
<select id="second">
<option value = "one">one</option>
<option value = "two">two</option>
<option value = "three">three</option>
</select>
<script type="text/javascript">
function chk()
{
index3 = document.getElementById("first");
str= index3.options[index3.selectedIndex].value;
alert("str:"+str);
if (str=="two")
{
$("#second option[value='two']").remove();
}
else
{
if ( $("#second option[value='two']").length == 0 )
{
$("#second").append('<option value="two">two</option>');
}
}
}
</script>
In fiddle it works fine here, But on mobile problem is: If I select option two from select id second, and then select option value two in first select id, then also option two is visible in second select id, if I click on second select id then only it removes. But in jsFiddle it works perfect. Any suggestion will be appreciated, Thanks in advance.
Here i have done complete bin for above issue. please go through demo link.
Demo http://codebins.com/bin/4ldqp7p
HTML
<select id="first">
<option value = "one">
one
</option>
<option value = "two">
two
</option>
<option value = "three">
three
</option>
</select>
<select id="second">
<option value = "one">
one
</option>
<option value = "two">
two
</option>
<option value = "three">
three
</option>
</select>
jQuery
$(function() {
$("#first").change(function() {
var optVal = $(this).val().trim();
if (optVal == "two") {
$("#second").find("option[value=" + optVal + "]").remove();
} else {
if ($("#second").find("option[value=two]").length <= 0) {
$("<option value=\"two\">two</option>").insertAfter($("#second").find("option[value='one']"));
}
}
});
});
Demo http://codebins.com/bin/4ldqp7p
check this Edit
$('#first').change(function() {
$("#second option[value='" + $(this).val() + "']").remove();
});
Your code looks a bit odd overall. If your intention is to remove the item from 'second' if it is selected in 'first', try this update: http://jsfiddle.net/NWbXt/58/
$(function() {
var first = $('#first'),
second = $('#second'),
removed;
first.change(function() {
var selected = first.val();
second.append(removed); //.. add back old option
removed = second.find('option[value="' + first.val() + '"]').remove();
}).trigger('change');
});
Related
I've got 2 dropdowns. One with 6 values :
Query 1
Query 2
Query 3
Query 4
ToxKeywords
Molecule
and the second with 2 values :
ToxKeywords
Molecule
I want that when we select ToxKeywords or Molecule in the first dropdown, the second dropdown should be empty.
Dropdowns :
<select class="form-control space" name="textQuery" id="textQuery">
<option selected disabled>Choose here</option>
<option value="ToxKeywords:%22genotoxicity%22%20AND%20ToxKeywords:%22ames%22%20OR%20ToxKeywords:%22micronucleus%22">Query 1 : Genotoxicity + Ames or Micronucleus</option>
<option value="ToxKeywords:%22systemic%20toxicity%22%20OR%20ToxKeywords:%22kidney%20toxicity%22">Query 2 : Systemic Toxicity or Kidney Toxicity</option>
<option value="ToxKeywords:%22antibacterial%20effect%22%20OR%20ToxKeywords:%22phototoxicity%22">Query 3 : Skin Sensitization + LLNA or Hript</option>
<option value="ToxKeywords:%22skin%20sensitization%22%20AND%20ToxKeywords:%22llna%22%20OR%20ToxKeywords:%22hript%22">Query 4 : Antibacterial Effect or Phototoxicity</option>
<option value="ToxKeywords:">ToxKeywords</option>
<option value="Molecules.Main_name:">Molecule</option>
</select>
<label for="textQuery2">Choose one parameter</label>
<select class="form-control space" name="textQuery2" id="textQuery2">
<option selected disabled>Choose here</option>
<option value="%20AND%20ToxKeywords:">ToxKeywords</option>
<option value="%20AND%20Molecules.Main_name:">Molecule</option>
</select>
I find this jquery code that hide only the same value wich is selected :
$(document).ready(function() {
var layout_select_html = $('#textQuery2').html(); //save original dropdown list
$("#textQuery").change(function () {
var cur_column_val = $(this).val(); //save the selected value of the first dropdown
$('#textQuery2').html(layout_select_html); //set original dropdown list back
$('#textQuery2').children('option').each(function () { //loop through options
if ($(this).val().indexOf(cur_column_val) != -1) { //do your conditional and if it should not be in the dropdown list
$(this).remove(); //remove option from list
}
});
});
})
Could someone find a way to hide both values of the second dropdown when ToxKeywords or Molecule is selected in the first one ?
$(document).ready(function() {
var layout_select_html = $('#textQuery2').html(); //save original dropdown list
$("#textQuery").change(function () {
var cur_column_val = $(this).val(); //save the selected value of the first dropdown
if($(this).val()==='ToxKeywords:' || $(this).val()==='Molecules.Main_name:') {
return $('#textQuery2').empty();
}
$('#textQuery2').html(layout_select_html); //set original dropdown list back
$('#textQuery2').children('option').each(function () { //loop through options
if ($(this).val().indexOf(cur_column_val) != -1) { //do your conditional and if it should not be in the dropdown list
$(this).remove(); //remove option from list
}
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control space" name="textQuery" id="textQuery">
<option selected disabled>Choose here</option>
<option value="ToxKeywords:%22genotoxicity%22%20AND%20ToxKeywords:%22ames%22%20OR%20ToxKeywords:%22micronucleus%22">Query 1 : Genotoxicity + Ames or Micronucleus</option>
<option value="ToxKeywords:%22systemic%20toxicity%22%20OR%20ToxKeywords:%22kidney%20toxicity%22">Query 2 : Systemic Toxicity or Kidney Toxicity</option>
<option value="ToxKeywords:%22antibacterial%20effect%22%20OR%20ToxKeywords:%22phototoxicity%22">Query 3 : Skin Sensitization + LLNA or Hript</option>
<option value="ToxKeywords:%22skin%20sensitization%22%20AND%20ToxKeywords:%22llna%22%20OR%20ToxKeywords:%22hript%22">Query 4 : Antibacterial Effect or Phototoxicity</option>
<option value="ToxKeywords:">ToxKeywords</option>
<option value="Molecules.Main_name:">Molecule</option>
</select>
<label for="textQuery2">Choose one parameter</label>
<select class="form-control space" name="textQuery2" id="textQuery2">
<option selected disabled>Choose here</option>
<option value="%20AND%20ToxKeywords:">ToxKeywords</option>
<option value="%20AND%20Molecules.Main_name:">Molecule</option>
</select>
Try this
$("#textQuery").change(function () {
var cur_column_val = $(this).val(); //save the selected value of the first dropdown
$('#textQuery2').html(layout_select_html); //set original dropdown list back
$('#textQuery2').children('option').each(function () { //loop through options
if ($(this).val().indexOf(cur_column_val) != -1) { //do your conditional and if it should not be in the dropdown list
$("#textQuery2 option[value='%20AND%20ToxKeywords:']").remove();
$("#textQuery2 option[value='%20AND%20Molecules.Main_name:']").remove(); //remove option from list
}
});
});
It will remove both options.
})
$("#textQuery").change(function () {
var cur_column_val = $(this).val();
if(cur_column_val=='ToxKeywords' || cur_column_val=='Molecule'){
$('option[value=textQuery2]', $('#textQuery2')).remove();
$('option[value=Molecule]', $('#textQuery2')).remove();
}
});
doen't work like this? let me know :)
I'am trying to select the empty (first) value of a dropdown select option if it does not contains the value from an another dropdown select list:
$('#FirstDropdown').change(function() {
if ( $('#SecondDropdown option').filter(':contains(' + this.value + ')') ){
$('#SecondDropdown option').filter(':contains(' + this.value + ')').prop('selected',true);
}else{
$("#SecondDropdown option[value='']").prop('selected',true);
}
});
This code work well if #SecondDropdown option contains this.value but the else statement doesn't reset the dropdown list if not.
Any suggestion please ?
EDIT : The dropdown lists look like this :
<select id="FirstDropdown">
<option value="" selected="selected"> </option>
<option value="VAL1">First Value</option>
<option value="VAL2">Second Value</option>
<option value="VAL3">Third Value</option>
<option value="VAL4">Fourth Value</option>
</select>
<select id="SecondDropdown">
<option value="-1"> </option>
<option value="12">VAL1 SELECT OPTION</option>
<option value="15">VAL2 SELECT OPTION</option>
<option value="10">VAL3 SELECT OPTION</option>
</select>
EDIT : Added a JsFiddle.
You do not have any option element having value=''. You need to use $("#SecondDropdown option[value='-1']").prop('selected',true); . you would also need to change the condition in if statement to this.value!='':
$('#FirstDropdown').change(function() {
if ( this.value!='' ){
$('#SecondDropdown option').filter(':contains(' + this.value + ')').prop('selected',true);
}else{
$("#SecondDropdown option[value='-1']").prop('selected',true);
}});
Working Demo
Try this :There is problem in your if condition as it is getting always true. You can use .length to check if option exist and select the option else select blank
$('#FirstDropdown').change(function() {
if ($('#SecondDropdown option:contains('+this.value +')').length>0){
$('#SecondDropdown option:contains('+this.value +')').prop('selected',true);
}else{
$("#SecondDropdown option[value='-1']").prop('selected',true);
}
});
JSFiddle Demo
This will work for you.
First, you have to check you this.value, because any string contains ''.
Second, as if works fine, you just need to filter options by [value=-1]
Final JS:
$('#FirstDropdown').change(function() {
var $second = $('#SecondDropdown option').filter(':contains(' + this.value + ')');
if (this.value && $second){
$second.prop('selected',true);
}else{
$("#SecondDropdown option[value=-1]").prop('selected',true);
}
});
I have two select elements with times 12:00 AM through 11:45 PM,
both selects have the same options inside including text and value. Is it possible for example say I select 1:00 PM on the first select to remove all the options before 1:00 PM on the second select? I know I can detect the change with jquery
$('#select1').change(function(){
// in here do something to remove previous selects
});
Any help would be appreciated it.
Here is another version of the same where we allow for the user to change his first selection and still filter the second select correctly
$(document).ready(function() {
var to_mins = function(x) {
var p = x.split(':').map(function(v) { return parseInt(v, 10); });
return (p[0] * 60) + p[1];
};
$('#second').data('options', $('#second').find('option').toArray());
$('#first').change(function() {
var val = to_mins(this.value);
console.log(val);
$('#second').empty();
$('#second').data('options').filter(function(v) {
return to_mins(v.value) > val;
}).map(function(v) {
$('#second').append(v.cloneNode(true));
});
});
});
Try
$('#select1').change(function(){
var $this = $(this);
var index = $('option:selected', $this).index();
$('#select2 option').show().filter(':lt(' + index + ')').hide();
})
Demo: Fiddle
try this
$('#select1').change(function(){
var value = $(this).val();
$("#selectId > option").each(function() {
if(value > this.value)
$("#selectId option[value=this.value]").remove();
});
});
But the values need to be in ascending order for select boxes
HTML:
<select id="select1">
<option value="1">11h00</option>
<option value="2">11h15</option>
<option value="3">11h30</option>
<option value="4">11h45</option>
<option value="5">12h00</option>
<option value="6">12h15</option>
<option value="7">12h30</option>
<option value="8">12h45</option>
<option value="9">13h00</option>
</select>
<select id="select2">
<option value="1">11h00</option>
<option value="2">11h15</option>
<option value="3">11h30</option>
<option value="4">11h45</option>
<option value="5">12h00</option>
<option value="6">12h15</option>
<option value="7">12h30</option>
<option value="8">12h45</option>
<option value="9">13h00</option>
</select>
JS:
$(document).ready( function(){
$('#select1').change(function(){
var val = $(this).find('option:selected').prop('value');
$('#select2').find('option').show().each(function(){
if( $(this).prop('value') <= val ){
$(this).hide();
}
else{
return false;
}
});
});
});
I need to show/hide options on one select drop down dependant on another select drop down options.
The code below shows what I am trying to achieve.
If the 'column_select' select menu option is set to '1 column' then the 'layout_select' select menu must display only the 'none' option.
If the 'column_select' select menu option is set to '2 column' then the 'layout_select' select menu must display only the 'layout 1' and 'layout 2' options.
If the 'column_select' select menu option is set to '3 column' then the 'layout_select' select menu must display only the 'layout 3', 'layout 4' and 'layout 5' options.
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1">none</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
So far everything I have tried has failed abysmally.... I am new to jQuery. If anybody could please help it would be much appreciated. Thanks!
Try -
$("#column_select").change(function () {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
If you were going to use this solution you'd need to hide all of the elements apart from the one with the 'none' value in your document.ready function -
$(document).ready(function() {
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
})
Demo - http://jsfiddle.net/Mxkfr/2
EDIT
I might have got a bit carried away with this, but here's a further example that uses a cache of the original select list options to ensure that the 'layout_select' list is completely reset/cleared (including the 'none' option) after the 'column_select' list is changed -
$(document).ready(function() {
var optarray = $("#layout_select").children('option').map(function() {
return {
"value": this.value,
"option": "<option value='" + this.value + "'>" + this.text + "</option>"
}
})
$("#column_select").change(function() {
$("#layout_select").children('option').remove();
var addoptarr = [];
for (i = 0; i < optarray.length; i++) {
if (optarray[i].value.indexOf($(this).val()) > -1) {
addoptarr.push(optarray[i].option);
}
}
$("#layout_select").html(addoptarr.join(''))
}).change();
})
Demo - http://jsfiddle.net/N7Xpb/1/
How about:
(Updated)
$("#column_select").change(function () {
$("#layout_select")
.find("option")
.show()
.not("option[value*='" + this.value + "']").hide();
$("#layout_select").val(
$("#layout_select").find("option:visible:first").val());
}).change();
(assuming the third option should have a value col3)
Example: http://jsfiddle.net/cL2tt/
Notes:
Use the .change() event to define an event handler that executes when the value of select#column_select changes.
.show() all options in the second select.
.hide() all options in the second select whose value does not contain the value of the selected option in select#column_select, using the attribute contains selector.
And in 2016.....I do this (which works in all browsers and does not create "illegal" html).
For the drop-down select that is to show/hide different values add that value as a data attribute.
<select id="animal">
<option value="1" selected="selected">Dog</option>
<option value="2">Cat</option>
</select>
<select id="name">
<option value=""></option>
<option value="1" data-attribute="1">Rover</option>
<option value="2" selected="selected" data-attribute="1">Lassie</option>
<option value="3" data-attribute="1">Spot</option>
<option value="4" data-attribute="2">Tiger</option>
<option value="5" data-attribute="2">Fluffy</option>
</select>
Then in your jQuery add a change event to the first drop-down select to filter the second drop-down.
$("#animal").change( function() {
filterSelectOptions($("#name"), "data-attribute", $(this).val());
});
And the magic part is this little jQuery utility.
function filterSelectOptions(selectElement, attributeName, attributeValue) {
if (selectElement.data("currentFilter") != attributeValue) {
selectElement.data("currentFilter", attributeValue);
var originalHTML = selectElement.data("originalHTML");
if (originalHTML)
selectElement.html(originalHTML)
else {
var clone = selectElement.clone();
clone.children("option[selected]").removeAttr("selected");
selectElement.data("originalHTML", clone.html());
}
if (attributeValue) {
selectElement.children("option:not([" + attributeName + "='" + attributeValue + "'],:not([" + attributeName + "]))").remove();
}
}
}
This little gem tracks the current filter, if different it restores the original select (all items) and then removes the filtered items. If the filter item is empty we see all items.
A litle late perhaps but I would suggest
$(document).ready(function() {
var layout_select_html = $('#layout_select').html(); //save original dropdown list
$("#column_select").change(function () {
var cur_column_val = $(this).val(); //save the selected value of the first dropdown
$('#layout_select').html(layout_select_html); //set original dropdown list back
$('#layout_select').children('option').each(function(){ //loop through options
if($(this).val().indexOf(cur_column_val)== -1){ //do your conditional and if it should not be in the dropdown list
$(this).remove(); //remove option from list
}
});
});
Initialy both dropdown have same option ,the option you select in firstdropdown is hidden in seconddropdown."value" is custom attribute which is unique.
$(".seconddropdown option" ).each(function() {
if(($(this).attr('value')==$(".firstdropdown option:selected").attr('value') )){
$(this).hide();
$(this).siblings().show();
}
});
// find the first select and bind a click handler
$('#column_select').bind('click', function(){
// retrieve the selected value
var value = $(this).val(),
// build a regular expression that does a head-match
expression = new RegExp('^' + value),
// find the second select
$select = $('#layout_select);
// hide all children (<option>s) of the second select,
// check each element's value agains the regular expression built from the first select's value
// show elements that match the expression
$select.children().hide().filter(function(){
return !!$(this).val().match(expression);
}).show();
});
(this is far from perfect, but should get you there…)
I have a select element wrapped by a span element. I am not allowed to use the select id but I am allowed to use the span id.
I am trying to write a javascript/jquery function in which the input is a number i, which is one of the values of the select's options. The function will turn the relevant option to selected.
<span id="span_id">
<select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
<option value="1">cleaning</option>
<option value="2">food-2</option>
<option value="3">toilet</option>
<option value="4">baby</option>
<option value="6">knick-knacks</option>
<option value="9">junk-2</option>
<option value="10">cosmetics</option>
</select>
</span>
I wrote something as follows (this does not completely work, which is why I am posting this question):
function select_option(i) {
options = $('#span_id').children('select').children('option');
//alert(options.length); //7
//alert(options[0]); //[object HTMLOptionElement]
//alert(options[0].val()); //not a jquery element
//alert(options[0].value); //1
//the following does not seem to work since the elements of options are DOM ones not jquery's
option = options.find("[value='" + i + "']");
//alert(option.attr("value")); //undefined
option.attr('selected', 'selected');
}
Thanks!
Here's the simplest solution with a clear selector:
function select_option(i) {
return $('span#span_id select option[value="' + i + '"]').html();
}
With jQuery > 1.6.1 should be better to use this syntax:
$('#span_id select option[value="' + some_value + '"]').prop('selected', true);
Just wrap your option in $(option) to make it act the way you want it to. You can also make the code shorter by doing
$('#span_id > select > option[value="input your i here"]').attr("selected", "selected")
options = $("#span_id>select>option[value='"+i+"']");
option = options.text();
alert(option);
here is the fiddle http://jsfiddle.net/hRFYF/
You can use .val() to select the value, like the following:
function select_option(i) {
$("#span_id select").val(i);
}
Here is a jsfiddle: https://jsfiddle.net/tweissin/uscq42xh/8/
To get the value just use this:
<select id ="ari_select" onchange = "getvalue()">
<option value = "1"></option>
<option value = "2"></option>
<option value = "3"></option>
<option value = "4"></option>
</select>
<script>
function getvalue()
{
alert($("#ari_select option:selected").val());
}
</script>
this will fetch the values
function select_option(index)
{
var optwewant;
for (opts in $('#span_id').children('select'))
{
if (opts.value() = index)
{
optwewant = opts;
break;
}
}
alert (optwewant);
}
You can change with simple javascript
document.querySelector('#h273yrjdfhgsfyiruwyiywer').value='4'
<span id="span_id">
<select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
<option value="1">cleaning</option>
<option value="2">food-2</option>
<option value="3">toilet</option>
<option value="4">baby</option>
<option value="6">knick-knacks</option>
<option value="9">junk-2</option>
<option value="10">cosmetics</option>
</select>
</span>
$("#h273yrjdfhgsfyiruwyiywer").children('[value="' + i + '"]').prop("selected", true);