I have a filter on a page consisting of 3 select dropdown's. When a value in each dropdown is selected, it's added to the URL, so it now looks like this:
domain.com/page#filter-1=.class1&filter-2=.class2&filter-3=.class3&
filter-1 is the id of the select, so filter-1=.class1 should select the option value .class1 in the filter-1 select and likewise for each select. But I just don't know how.
I have my URL hash in a var called hashFilter.
A simplified example
<select class="filter_select" id="filter-1" role="group" data-filter-group="filter-1">
<option class="filter_select_option" data-filter="">Show all</option>
<option class="filter_select_option" data-filter=".class-1" value=".class-1">Option 1</option>
<option class="filter_select_option" data-filter=".class-2" value=".class-2">Option 2</option>
<option class="filter_select_option" data-filter=".class-3" value=".class-3">Option 3</option>
<option class="filter_select_option" data-filter=".class-4" value=".class-4">Option 4</option>
</select>
<select class="filter_select" id="filter-2" role="group" data-filter-group="filter-2">
<option class="filter_select_option" data-filter="">Show all</option>
<option class="filter_select_option" data-filter=".class-1" value=".class-1">Option 1</option>
<option class="filter_select_option" data-filter=".class-2" value=".class-2">Option 2</option>
<option class="filter_select_option" data-filter=".class-3" value=".class-3">Option 3</option>
<option class="filter_select_option" data-filter=".class-4" value=".class-4">Option 4</option>
</select>
<select class="filter_select" id="filter-3" role="group" data-filter-group="filter-3">
<option class="filter_select_option" data-filter="">Show all</option>
<option class="filter_select_option" data-filter=".class-1" value=".class-1">Option 1</option>
<option class="filter_select_option" data-filter=".class-2" value=".class-2">Option 2</option>
<option class="filter_select_option" data-filter=".class-3" value=".class-3">Option 3</option>
<option class="filter_select_option" data-filter=".class-4" value=".class-4">Option 4</option>
</select>
I can set a select with e.g.:
jQuery("#filter-1").val('class-1');
But I don't know how to do it with multiple selects dynamically.
Any help is appreciated.
Thanks.
if you want the value of of specific filter, use the id attribute in the selector
jQuery("#filter-1 option:selected").text()
if you want all values of all filters, use the class attribute in the selector
jQuery(".filter_select option:selected")
if you would like to dynamically pick one value from the selection based on the url, you will have to first parse the url, then use the parsed values to set the selection. for instance:
# naievely parse the url
const map = window
.location
.hash
.slice(1,-1)
.split('&')
.reduce((map, element) => {
const [key, val] = element.split('=');
map[key] = val;
return map;
}, {})
# set selection
for (const [filterId, value] of Object.entries(map))
jQuery(`#${filterId}`).val(value);
Related
I am trying to loop through a multiple select dropdown list and add all of the selected options to a comma separated list.
My dropdown code is:
<select name="testnameID" id="testnameID" multiple>
<option value="1">Test number 1</option>
<option value="2">Test number 2</option>
<option value="3">Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
In my tag I am using the following, but think it can be simplified or improved:
var testnameID = $('#testnameID').val();
var testnameText;
Array.from(document.querySelector("#testnameID").options).forEach(function(option_element) {
let option_text = option_element.text;
let is_option_selected = option_element.selected;
if (is_option_selected===true){
testnameText = testnameText + option_text +", ";
console.log("TestnameText: "+testnameText);
console.log("\n\r");
}
});
I need to generate a variable, testnameText, which if the first three items were selected, would return a value of "Test number 1, Test number 2, Test number 3"
I'm getting myself in a muddle!
You can try using Document.querySelectorAll() to target all the selected options like the following way:
Array.from(document.querySelectorAll("#testnameID option:checked")).forEach(function(option_element) {
let option_text = option_element.text;
var testnameText = option_text +", ";
console.log("TestnameText: "+testnameText);
console.log("\n\r");
});
<select name="testnameID" id="testnameID" multiple>
<option value="1" selected>Test number 1</option>
<option value="2" selected>Test number 2</option>
<option value="3" selected>Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
You can also try using Array.prototype.map() and Arrow function expressions which is more shorter.
The following example creates an array of the selected options:
var checkedOptions = Array.from(document.querySelectorAll("#testnameID option:checked"));
var res = checkedOptions.map(option_element => ("TestnameText: "+option_element.text));
console.log(res);
<select name="testnameID" id="testnameID" multiple>
<option value="1" selected>Test number 1</option>
<option value="2" selected>Test number 2</option>
<option value="3" selected>Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
<select>
In this case, jquery's each() can help. So getting selected options is pretty simple:
$('#testnameID :selected').each(function (index, el) {
console.log("TestnameText: " + $(el).text());
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<select name="testnameID" id="testnameID" multiple>
<option value="1" selected>Test number 1</option>
<option value="2" selected>Test number 2</option>
<option value="3" selected>Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
</select>
selectedOptions contains all the selected options of a select element. You can use it like this:
const select = document.querySelector('select');
select.addEventListener('change', e => {
// Option texts as an array
const texts = Array.from(e.target.selectedOptions).map(({text}) => text);
// Option texts as a comma-separated string
const textsStr = texts.join(', ');
console.log(texts);
console.log(textsStr);
});
<select multiple>
<option value="1">Test number 1</option>
<option value="2">Test number 2</option>
<option value="3">Test number 3</option>
<option value="4">Test number 4</option>
<option value="5">Test number 5</option>
</select>
This works outside of the event too, just refer the select element directly instead of e.target.
when I open the combobox via contextMenu, always the same item is selected.
How can I determine that one of the other items is selected?
For instance, there are 3 items "car1", "car2", "car3" and when I open the combobox "car1" appears in the list first. So how would I get e.g. "car2" appears in the list first?
Thanks very much!
if you mean a select element, you can change the order of items
<select id="list">
<option value="2">Car 2</option>
<option value="1">Car 1</option>
<option value="3">Car 3</option>
</select>
you could also set the default item with the selected attribute:
<select id="list">
<option value="1">Car 1</option>
<option value="2" selected>Car 2</option>
<option value="3">Car 3</option>
</select>
in JS you simply have to set the value of your select
const myForm = document.forms['my-form']
// set the select on the second cat
myForm.miaou.value = 'c2'
<form action="xxx" name="my-form">
<!-- other form elements -->
<select name="miaou">
<option value="c1">Cat 1</option>
<option value="c2">Cat 2</option>
<option value="c3">Cat 3</option>
</select>
</form>
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');
}
})
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>
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