Check if combobox is selected - javascript

I have two comboboxes. I want to know which combobox is selected. I want to do like below using ajax, jquery in a jsp file.
if(combobox1 selected)
{
action 1
}
if(combobox2 selected)
{
action 2
}
Thanks.

would it be this ? in this case you could know which was the last modified element. I used switch case because you could have several comboxes
<div class="wrapper">
<select class="my_combox" name="combox1">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
</select>
<select class="my_combox" name="combox2">
<option value="5">other value 1</option>
<option value="6">other value 1</option>
<option value="7">other value 1</option>
<option value="8">other value 1</option>
</select>
</div>
Script
var lastSelectedCombox = "";
$('.my_combox').on('change',function(e){
lastSelectedCombox = $(this).attr('name');
switch(lastSelectedCombox){
case 'combox1':console.log('first combox');
break;
case 'combox2':console.log('second combox');
break;
default:
console.log('any combox expected');
}
})

Related

Js dropdown depends of an other dropdown

Hey guys simple question how can I display in the second dropdown information that depends of the first one.
Example. I have this:
var option = document.getElementById("second_dropdown").getElementsByTagName("option");
for (var j = 0; j < option.lenght; j++) {
option[j].disabled = true;
}
<!-- DROPDOWN 1 -->
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- DROPDOWN 2 -->
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</option>
<optgroup label="2">
<option value="103">blabla</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</option>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</option>
<select>
And I would like to display in dropdown 2 only the optgroup that has been selected in dropdown 1 ...
I really don't know about js so I hope that i explained it well and thanks in advance :)
But here I only disable all (and I want to disable only what's not selected in dropdown one) and I don't want to disable but I want to undisplay.
Loop through optgroup of second <select> and in loop check if value of first select is equal to label of optgroup remove disabled of it.
document.querySelector("#first_dropdown").onchange = function(){
var val = this.value;
document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
ele.disabled = ele.label != val
});
};
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</optgroup>
<optgroup label="2">
<option value="103">blabla</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</optgroup>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</optgroup>
<select>
Also you should change display property of element if you want to show/hide optgroup
document.querySelector("#first_dropdown").onchange = function(){
var val = this.value;
document.querySelectorAll("#second_dropdown optgroup").forEach(function(ele){
ele.style.display = ele.label==val ? "block" : "none";
});
};
Also you can do this work simplify using jquery
$("#first_dropdown").change(function(e){
$("#second_dropdown optgroup").css("display", function(){
return this.label==e.target.value ? "block" : "none";
});
});
You can try the following way:
var firstDD = document.getElementById('first_dropdown');
firstDD.addEventListener('change',changeDD);
function changeDD(){
var fValue = firstDD.value;
document.querySelectorAll('#second_dropdown > optgroup').forEach(function(el){
if(el.label != fValue )
el.style.display='none';
else
el.style.display='block';
});
document.querySelector('#second_dropdown').value = "";
}
changeDD(firstDD);
<select id="first_dropdown" name="first_d">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="second_dropdown" name="second_d">
<optgroup label="1">
<option value="100">blabla</option>
<option value="101">blabla</option>
<option value="102">blabla</option>
</optgroup>
<optgroup label="2">
<option value="103">blabla 21</option>
<option value="104">blabla</option>
<option value="105">blabla</option>
</optgroup>
<optgroup label="3">
<option value="106">blabla</option>
<option value="107">blabla</option>
<option value="108">blabla</option>
</optgroup>
<select>

How to modify a html select to display all options with matching data attribute?

I have a html select drop-down listing various cats, each with a data attribute of "color", an associated color, and a button next to the drop-down.
Using pure javascript, I want to be able to click the button, get the "color" attribute of the selected cat, and have the list display all cats with the same color attribute.
Example: I've selected Cat 1 who has a color attribute of "black", I click the button and the drop down displays Cats 1, 3 and 4 as options.
Would I need to implement a for loop, or would for/in statement work?
function filter() {
//onclick modifies the "catList" select to display all cats with the same data-color attribute.
var list = document.getElementByID("catList");
};
<form>
<select id="catList">
<option data-color="black">Cat 1</option>
<option data-color="orange">Cat 2</option>
<option data-color="black">Cat 3</option>
<option data-color="black">Cat 4</option>
<option data-color="orange">Cat 5</option>
</select>
</form>
<button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button>
Loop over the option list, and add display none, to options that don't have the same data attribute value as with the selected option.
Option 1 (this will hide the other options, and you won't be able to select them, until you refresh the page)
function filter() {
//onclick modifies the "catList" select to display all cats with the same data-color attribute.
var list = document.getElementById("catList");
var option = list.options[list.selectedIndex]
list.querySelectorAll('[data-color]').forEach(function (element) {
if (option.getAttribute('data-color') !== element.getAttribute('data-color')) {
element.classList.add('filter');
}
})
};
.filter {
display: none;
}
<form>
<select id="catList">
<option data-color="black">Cat 1</option>
<option data-color="orange">Cat 2</option>
<option data-color="black">Cat 3</option>
<option data-color="black">Cat 4</option>
<option data-color="orange">Cat 5</option>
</select>
</form>
<button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button>
Option 2
function filter() {
//onclick modifies the "catList" select to display all cats with the same data-color attribute.
var list = document.getElementById("catList");
var color_filter = document.getElementById("color");
var value = color_filter.options[color_filter.selectedIndex].value;
list.querySelectorAll('[data-color]').forEach(function (element) {
if (value !== element.getAttribute('data-color')) {
element.classList.add('filter');
}else {
element.classList.remove('filter');
}
});
};
.filter {
display: none;
}
<select id="color" onchange="filter()">
<option value="">Select filter</option>
<option value="black">Black</option>
<option value="orange">Orange</option>
</select>
<select id="catList">
<option data-color="black">Cat 1</option>
<option data-color="orange">Cat 2</option>
<option data-color="black">Cat 3</option>
<option data-color="black">Cat 4</option>
<option data-color="orange">Cat 5</option>
</select>
You can try by this way
HTML
<form>
<select id="catList">
<option data-color="black">Cat 1</option>
<option data-color="orange">Cat 2</option>
<option data-color="black">Cat 3</option>
<option data-color="black">Cat 4</option>
<option data-color="orange">Cat 5</option>
<option data-color="black">Cat 6</option>
</select>
</form>
<button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button>
JS
window.filter = function () {
var action_list = document.getElementById("catList");
var selected_color = action_list.options[action_list.selectedIndex].getAttribute("data-color");
for (var i = action_list.options.length - 1; i >= 0; i--) {
if (action_list.options[i].getAttribute("data-color") != selected_color) {
action_list.remove(i);
}
}
};
Solution 1. see live demo here jsfiddle
Solution 2. see live demo here jsfiddle

jQuery Select box multiple option get value and match values

I have same classname multi select box with same values in body, what I want if use chose value 1 from first or any select box then that value 1 on all other select box option will disable so user can't choose the same value in other multi select box.
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
This need to achieve via javascript or jQuery,
So you're likely going to get downvotes. You haven't actually shown that you've tried anything, you have only given us the HTML and asked that we solve your problem.
That said, I like to sink my teeth into easy problems, as this is. What you're wanting to do is, in each select, listen for the change event. When that triggers, get the value of the selected option, and disable any option with that value in any other selects. Take a look at the following:
$(function() {
/********
* Function to disable the currently selected options
* on all sibling select elements.
********/
$(".myselect").on("change", function() {
// Get the list of all selected options in this select element.
var currentSelectEl = $(this);
var selectedOptions = currentSelectEl.find("option:checked");
// otherOptions is used to find non-selected, non-disabled options
// in the current select. This will allow for unselecting. Added
// this to support extended multiple selects.
var otherOptions = currentSelectEl.find("option").not(":checked").not(":disabled");
// Iterate over the otherOptions collection, and using
// each value, re-enable the unselected options that
// match in all other selects.
otherOptions.each(function() {
var myVal = $(this).val();
currentSelectEl.siblings(".myselect")
.children("option[value='" + myVal + "']")
.attr("disabled", false);
})
// iterate through and disable selected options.
selectedOptions.each(function() {
var valToDisable = $(this).val();
currentSelectEl.siblings('.myselect')
.children("option[value='" + valToDisable + "']")
.attr("disabled", true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel2" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel3" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel4" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
Edited the above code to support multiple selects. Actually, it wasn't so much an issue of multiple selects, as I was doing a very lazy handling of unselecting options. Now, when the user is selecting or de-selecting options in any select, only the non-disabled options in that select are used: the (":checked") to disable that option in all other selects, and the .not(":checked") to re-enable any options that the user has somehow unselected.
Try this code , it should do the job:
using Not selector and for each to iterate on other select options:
$(document).ready(function() {
$('.myselect:first').change(function() { // once you change the first select box
var s = $('.myselect:first option:selected').val(); // get changed or clicked value
others = $(':not(.myselect:first) >option'); //select other controls with option value
others.each(function() {
if (this.value == s) // for example if you click on 1 the other controls will get 1 disabled
$(this).attr('disabled', 'disabled').siblings().removeAttr('disabled');
// remove disabled from others if you click something else
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>

Select Dropdown based on the partial value in dropdown value field

I have a scenario where i have to select the drop value based on querystring.
Query string could be likeq=c-1 q=c-2 q=p-5
and value in drop-down could be value="8-P-5" value="5-G-0" value="7-P-7"
How can i select the drop-down value based on query-string
Is it possible to do it from Code-behind C# or jquery is easy solution.
<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control">
<option value="1-C-1">Item 1</option>
<option value="4-C-2">Item 2</option>
<option value="5-G-0">Item 3</option>
<option value="7-P-7">Item 4</option>
<option value="8-P-5">Item 5</option>
<option value="10-C-4">Item 6</option>
<option value="3-P-0">Item 7</option>
<option value="2-P-0">Item 8</option>
<option value="6-G-0">Item 9</option>
</select>
If query-string is q=c-2 then this should be selected <option value="4-C-2" selected>Item 2</option>
If you are open for a JavaScript/jQuery solution you can take the window.location.search and then use a jQuery selector to find the option based on a contains condition in a specific select tag.
Do note that this assumes the value that comes in your q is uniquely identifiable in a value property of your select element. In your current dataset q=p-0 will have both Item 7 AND Item 8 match. As you didn't provide a business rule for that case I left that here untouched.
Here is a snippet that demonstrate this:
// use window.location.search
var search = '?q=p-5'; // window.location.search;
// handle possible search for this value ?foo=bar&q=p-5#fragment
var parms = search.substr(1).split('&');
for(var i=0; i< parms.length;i++)
{
var keyValue= parms[i].split('=');
if (keyValue[0] === "q" && keyValue.length > 0) {
var value = keyValue[1].split('#');
$('select > option[value*="' + value[0].toUpperCase() + '"]').prop('selected',true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="ctl00$ContentPlaceHolder1$ddlOptionGroup" id="ContentPlaceHolder1_ddlOptionGroup" class="form-control">
<option value="1-C-1">Item 1</option>
<option value="4-C-2">Item 2</option>
<option value="5-G-0">Item 3</option>
<option value="7-P-7">Item 4</option>
<option value="8-P-5">Item 5</option>
<option value="10-C-4">Item 6</option>
<option value="3-P-0">Item 7</option>
<option value="2-P-0">Item 8</option>
<option value="6-G-0">Item 9</option>
</select>
for (int i = DropDownList1.Items.Count-1; i >0 ; i--)
{
if (DropDownList1.Items[i].Value.Contains("C-2"))
{
DropDownList1.Items[i].Selected = true;
break;
}
}
or you can do it by Linq syntax
DropDownList1.Items.Cast<ListItem>()
.Where(x => x.Value.Contains("C-2"))
.LastOrDefault().Selected = true;

How To Set All Choice/Select Dropdown

I have a global select box on the page that I want to use to set all of the other select boxes on the page. They all have the same options in them.
So when I change the global drop down, how do I set all of the other ones to the same value.
All of my other select boxes have an id that starts with "inventory_location_select_"
$("#global_location").change(function(){
var globalValue = $("#global_location").val();
$("input[id^=inventory_location_select_]").val(globalValue);
});
Here is my html:
Main Select Box:
<select id="global_location">
<option selected="selected">Choose Option</option>
<option value="3542">Acme Pos 1</option>
<option value="3545">Acme Pos 2</option>
<option value="4892">Acme Test 1234567890</option>
<option value="4896">FBA CA Prep</option>
<option value="4889">FBA Prep 1</option>
<option value="4895">FBA Prep 2</option>
<option value="4897">FBA Prep 3</option>
<option value="4893">POD 3 Area 1</option>
</select>
One of my other boxes:
<select id="inventory_location_select_1">
<option>Choose Option</option>
<option value="3542">Acme Pos 1</option>
<option value="3545">Acme Pos 2</option>
<option value="4892">Acme Test 1234567890</option>
<option value="4896">FBA CA Prep</option>
<option value="4889">FBA Prep 1</option>
<option value="4895">FBA Prep 2</option>
<option value="4897">FBA Prep 3</option>
<option value="4893">POD 3 Area 1</option>
</select>
This seems so easy, I just cant figure it out.
The selector is wrong, you are trying to select input elements:
$("select[id^=inventory_location_select_]").val(globalValue);
Change:
$("input[id^=inventory_location_select_]").val(globalValue);
to
$("[id^=inventory_location_select_]").val(globalValue);
Your elements are selects, but you tried to change inputs. Either way you don't need to necessarily specify them. If you need to, use $("select[id^=inventory_location_select_]").val(globalValue);
jsFiddle example

Categories