We Keep Coding

How to show only data-subtext matching with a selected option value - jQuery

I have a dropdown menu that looks like the following:
<select name="category" id="category">
<option value="category-1">category-1</option>
<option value="category-2">category-3</option>
<option value="category-3">category-2</option>
</select>
<select name="product" id="product">
<option data-subtext="category-1">product</option>
<option data-subtext="category-1">product</option>
<option data-subtext="category-2">product</option>
<option data-subtext="category-2">product</option>
<option data-subtext="category-3">product</option>
<option data-subtext="category-3">product</option>
</select>
how do I show only products matching data-subtext with its category value?

You need the hide and show it based on the selected value
$('select[name=category]').on('change', function (event) {
let selectedValue;
selectedValue = $(this).find('option:selected').text();
$('select[name=product] option').filter(function () {
if ($(this).attr('data-subtext') !== selectedValue) {
return true;
} else {
$(this).show();
this.selected = true;
}
}).hide()
});

How to select multiple options if check option from a different select?

I want select multiple option from second select depending on check option from first select.
For example:
adiunkt -> mikroklimat, RTG
agent celny -> zapylenie
First select:
<select name="form[stanowisko][]" id="stanowisko">
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
</select>
Second select:
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option value="mikroklimat">mikroklimat</option>
<option value="RTG">RTG</option>
<option value="zapylenie">zapylenie</option>
</select>
I tried this but it not working (select all options after first check):
function tes(){
if (document.getElementById('stanowisko').value ="agent celny") {
document.getElementById('czynniki_szkodliwe').options[2].selected = true;
document.getElementById('czynniki_szkodliwe').options[0].selected = true;
}
if ( document.getElementById('stanowisko').value="adiunkt") {
document.getElementById('czynniki_szkodliwe').options[1].selected = true;
}
}

Pure js solution.
let elem1 = document.getElementById('stanowisko'),
elem2 = document.getElementById('czynniki_szkodliwe');
elem1.addEventListener('change', (e) => {
Array.from(elem2.children).forEach(v => {
return v.disabled = v.getAttribute('data-attr') !== e.target.value;
})
});
<select name="form[stanowisko][]" id="stanowisko">
<option value="">-</option>
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
</select>
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option value="mikroklimat" disabled data-attr='adiunkt'>mikroklimat</option>
<option value="RTG" disabled data-attr='adiunkt'>RTG</option>
<option value="zapylenie" disabled data-attr='agent celny'>zapylenie</option>
</select>

You should use a data attribute to mark the options linked to the first select like this:
$(document).ready(function(){
$("#stanowisko").on("change", function(event){
var $options = $("#czynniki_szkodliwe option");
//Unselect all
$options.prop("selected", false);
var val = $("#stanowisko").val();
$options.each(function(idx, item) {
if($(item).data("stanowisko").indexOf(val) >= 0) {
$(item).prop("selected", true);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="form[stanowisko][]" id="stanowisko">
<option value="">Choose</option>
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
<option vlaue="lekarz">lekarz</option>
</select>
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option data-stanowisko='["adiunkt"]' value="mikroklimat">mikroklimat</option>
<option data-stanowisko='["adiunkt","lekarz"]' value="RTG">RTG</option>
<option data-stanowisko='["agent celny"]' value="zapylenie">zapylenie</option>
</select>
Edit: If several options, from the first select, refers to the same options in the second select, you can "store" an array in the data attribute in JSON format.
I updated the JS code to handle JSON array in the data attributes instead of a simple string.

multiple select boxes with same options - require unique selection

I have a form with 3 select boxes. Each select box has the same options. I want to require that you have to select a different option for each select box. For example, let's say the options are "cat", "dog" and "bird". If someone selects "bird" in the first select box, I want to disable or hide that option from the other two boxes. If they change their selection, then "bird" will be enabled or unhidden again.
<select id="box1">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
I assume I can do this with jquery onchange but I'm not sure how to require the unique selection across different select boxes.
$('select').on('change', function() {
// If option is selected, disable it in all other select boxes. If option is deselected, reenable it in all other select boxes.
})
Thanks for your help!

1) Top To Bottom Priority Approach
The flow must be top to bottom. This also means when ever the user changes the dropdown value all the next dropdown's which come after it must be reset. Having said this, here is my code snippet.
HandleDropdowns($('#box1')); //initially call this function to handle the dropdowns by passing the first dropdown as parameter
$('select').on('change', function() {
HandleDropdowns($(this)); // handle all dropdowns on any change event.
});
function HandleDropdowns(element) {
var $element = element;
var value = $element.val();
$element.nextAll().val(''); //using nextAll lets reset all the following dropdowns
$element.nextAll().attr('disabled', 'disabled'); //disable all the following dropdowns.
HandleOptions(); // call this function to toggle the options
if (value.length) {
$element.next().removeAttr('disabled'); // only if this dropdown has some selection enable the next dropdown.
}
}
function HandleOptions() {
$('option').removeAttr('disabled'); //reset all the options to be available
$.each($('select'), function() { //loop from top to bottom and disable the options one by one.
var value = $(this).val();
if (value.length) {
$(this).nextAll().find('option[value="' + value + '"]').attr('disabled', 'disabled');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
2) All Select Box With Same Priority Approach
In this approach when ever the user selects a value we check if any other dropdown has the same value, If yes reset it else do nothing. Below is a working sample.
$('select').on('change', function() {
HandleDropdowns($(this));
});
function HandleDropdowns(element) {
var $element = element;
var value = $element.val();
$.each($('select').not($element), function() { //loop all remaining select elements
var subValue = $(this).val();
if (subValue === value) { // if value is same reset
$(this).val('');
console.log('resetting ' + $(this).attr('id')); // demo purpose
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>

Try this
$('select').on('change', function () {
$("select").find("option").removeAttr("disabled");
$("select").not(this).find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
});

You can use onchange listener and evaluate the results simultaneously. Also add an reset button cause once three get selected, it becomes bottle neck case.
The working code is given below
function changeSelect(elements) {
var values = {};
elements.forEach(function(item){
values[item.id] = item.value;
});
elements.forEach(function(item){
for(var i = 0; i < item.children.length; i++) {
for(ids in values) {
if(item.id != ids && item.children[i].value == values[ids]) {
item.children[i].style.display = 'none';
}
}
}
});
}
function resetSelection(elements) {
elements.forEach(function(item){
item.value = '';
for(var i = 0; i < item.children.length; i++) {
item.children[i].style.display = '';
}
});
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var boxArray = [box1, box2, box3];
boxArray.forEach(function(item){
item.addEventListener('change', changeSelect.bind(undefined,boxArray));
});
document.getElementById('reset').addEventListener('click', resetSelection.bind(undefined,boxArray));
<select id="box1">
<option value="">Select An Option</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="">Select An Option</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="">Select An Option</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<button id="reset">Reset</button>

Javascript auto select from dropdown

I'm searching and searching and can not find anything exactly what I need.
So I need javascript, that will select option from dropdown, but not by the option value number, but name.
I have:
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
So I need to select • Jawor by name, not by id - it's the most important. How do I make it work?

For you is it like;
var options = document.getElementsByClassName("aa")[0].options,
name ="Jawor";
for(i = 0; i < options.length; i++){
if(options[i].text.indexOf(name) > -1){
options[i].selected = true;
break;
}
}
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

U need to Use onChange Event Handler ... for example
<select onchange="showSelected()">
Then write your script ...
<script>
function showSelected(){
var s=document.getElementById('local'); //refers to that select with all options
var selectText=s.options[s.selectedIndex].text // takes the one which the user will select
alert(selectText) //Showing the text selected ...
}
</script>
Rest of your code is okay !
<select class="aa" id="local" name="local" onchange='showSelected'()>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

Using jquery here. You can use the following function:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
}
})
}
A demo:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
return false;
}
})
}
//use the function
setTimeout(function() {
selectFromDropdown('#local', '• Dzierżoniów')
}, 1000)
setTimeout(function() {
selectFromDropdown('#local', '• Jawor')
}, 4000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="aa" id="local" name="local">
<option value="">Select</option>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>

for chrome console use this
document.getElementById("id").selectedIndex = '3'; or
document.getElementById('id').value = 'BA';

HTML multi select how to deselect all if select first item using jquery

I have a multi select control look like below,
When user select "Any", I want to deselect all other selected values and select only "Any", means, if user select "Any", do not allow to select other values else allow to select other values.
How its possible through jQuery
Thanks...

jQuery("#select").change(function() {
if (jQuery("#select option:first").is(':selected')) {
jQuery("#select").val("any");
}
});
To the form below:
<select multiple id="select">
<option value="any">Any</option>
<option value="...">...</option>
...
</select>

I think you want something like this:
$("select").on("change", function () {
var selOption = $("option:selected", this).val();
if (selOption == "any") {
$(this).attr("selected", false);
$(this).val("any");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select2" multiple="multiple">
<option value="any">Any</option>
<option value="12">twelve</option>
<option value="13">thirette</option>
<option value="14">fourteen</option>
<option value="15">fifteen</option>
<option value="16">sixteen</option>
<option value="17">seventeen</option>
<option value="18">eighteen</option>
<option value="19">nineteen</option>
<option value="20">twenty</option>
</select>

In most cases this should work
$('.my-select').val('any')
Where is ’any' is a value of Any option.
(function() {
var mSelect;
mSelect = $('select');
mSelect.on('click', function(event) {
var values, needReset;
values = mSelect.val();
needReset = event.target.value === 'any' ||
(values.length > 1 && values.indexOf('any') !== -1);
if (needReset) {
mSelect.val('any');
}
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
<option value="any">Any</option>
<option value="divorced">Maried</option>
<option value="unmarried">Unmarried</option>
</select>