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.
Related
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()
});
I am working on the below code. Why am I not able to get the selected option's data attribute?
$('#type-picker').on('change', function (e) {
var filter = $(this).data("filter");
console.log(filter);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectpicker" id="type-picker" data-width="100%" >
<option data-filter="na" >Select From The List</option>
<option data-filter="*">Display ALl</option>
<option data-filter=".type1">Relish</option>
<option data-filter=".type2">Relish</option>
<option data-filter=".type3">Relish</option>
</select>
$(this) will return the select itself, which has no data-filter, you need to get the selected option to obtain its filter attribute
$('#type-picker').on('change', function (e) {
var filter = $(this).find('option:selected').data("filter");
console.log(filter);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectpicker" id="type-picker" data-width="100%" >
<option data-filter="na" >Select From The List</option>
<option data-filter="*">Display ALl</option>
<option data-filter=".type1">Relish</option>
<option data-filter=".type2">Relish</option>
<option data-filter=".type3">Relish</option>
</select>
You are getting the data attribute of the select, not the option. Use $("#type-picker option:selected").
$('#type-picker').on('change', function (e) {
var filter = $("#type-picker option:selected").data("filter");
console.log(filter);
});
Working Example: https://jsfiddle.net/mspinks/zdng9s5o/2/
You need to get the selected <option> inside the <select>. this keyword references the <select>
Here's how you can do it without jQuery
$('#type-picker').on('change', function (e) {
var filter = this.children[this.selectedIndex].dataset.filter
// this would also work
//var filter = this.selectedOptions[0].dataset.filter
console.log(filter);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectpicker" id="type-picker" data-width="100%" >
<option data-filter="na" >Select From The List</option>
<option data-filter="*">Display ALl</option>
<option data-filter=".type1">Relish</option>
<option data-filter=".type2">Relish</option>
<option data-filter=".type3">Relish</option>
</select>
Hi I have a dropdown with checkbox. The dropdown list will be something like this:
* Select All
* N1
* N2
* N3
* N4
I want to select all the checkboxes by default. But when the user wants to select selectively, he/she has to uncheck select all which will unselect all the checkboxes and then he/she can select.
<select id="filter-select" multiple="multiple" >
<option value="1">Select All</option>
<option value="2">N1</option>
<option value="3">N2</option>
<option value="4">N3</option>
<option value="5">N4</option>
<option value="6">N5</option>
<option value="7">N6</option>
</select>
How to do this using Javascript/JQuery?
Try using change handler with selectedIndex
$(function() {
var filter = $('#filter-select');
filter.on('change', function() {
if (this.selectedIndex) return; //not `Select All`
filter.find('option:gt(0)').prop('selected', true);
filter.find('option').eq(0).prop('selected', false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="filter-select" multiple="multiple">
<option value="1">Select All</option>
<option value="2">N1</option>
<option value="3">N2</option>
<option value="4">N3</option>
<option value="5">N4</option>
<option value="6">N5</option>
<option value="7">N6</option>
</select>
Use prop to set the selected to true and in the selector you need to select all the options inside #filter-select:
Update :
Updated the snippet to check if the selected value is option 1 in select (i.e SelectAll) on select change event, if so then select all options and clear the selection of the first option.
selectAll();
$('#filter-select').change(function(){
if($("#filter-select option[value='1']").is(':selected'))
{
selectAll();
}
})
function selectAll()
{
$('#filter-select option').prop('selected', true);
$("#filter-select option[value='1']").prop('selected', false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="filter-select" multiple="multiple" >
<option value="1">Select All</option>
<option value="2">N1</option>
<option value="3">N2</option>
<option value="4">N3</option>
<option value="5">N4</option>
<option value="6">N5</option>
<option value="7">N6</option>
</select>
var selected=$('#filter-select option').prop('selected', true);
console.log(selected.text());
$('#filter-select').change(function(){
alert($('option:selected',this).text());
})
demo
When you select again the just get the new value
Edit:I think I have confused you guys with what I need. If I select val1 I need the function to return val1. If I then select val2, with val1 still selected as part of the multi select, I need to return val2. Then I can use the values to set the id and name of rewly created inputs.
I have a select list that has multiple="multiple"
I want to create a text input associated with each selected option and set the id and name of the new input based on the value of each newly selected option, but I always get the value of the first item from the onchange event. Not the first value, but the first selected value. So if I choose val2 first, that is returned, but if I choose val1 first then val2 the id and name will be the same as when val1 is selected.
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
I have used the following function and it returns the first value.
$("#multiSelect").on('change', function(evt, params) {
alert($("option:selected", this).val());
});
This will return the first selected option. If I then choose the second option, I still get the first value. I need to get the value of whichever option has been selected.
Thanks in advance.
The workaround is to save previously selected elements and compare them with newly selected ones:
let selectedOptions = [];
$("#multiSelect").on("change", function() {
const newSelectedOptions = $(this).val() || [];
const addedOptions = newSelectedOptions.filter(option => !selectedOptions.includes(option));
const removedOptions = selectedOptions.filter(option => !newSelectedOptions.includes(option));
selectedOptions = newSelectedOptions;
console.log("addedOptions", addedOptions);
console.log("removedOptions", removedOptions);
});
<select id="multiSelect" multiple="multiple">
<option value="value_1">Value 1</option>
<option value="value_2">Value 2</option>
<option value="value_3">Value 3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You get the selected values on change:
$("#multiSelect").on('change', function () {
var selected = $.map($('option:selected', this),
function (e) {
return $(e).val();
});
alert(selected);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
Try this one : http://jsfiddle.net/csdtesting/jb7ckarp/
$("#multiSelect").on('change', function(evt, params) {
$("#myDiv").append("<span id='mySpan'><input type='text' name='" + $(this).val() + "' value='My name is: " + $(this).val() + "'/>")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
<div id="myDiv">
</div>
Maybe this is what you want, or not :D http://jsfiddle.net/mnm2oaeo/
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
<script type="text/javascript">
var items = [];
$("#multiSelect").on('change', function(evt, params) {
var selected = $(this).val() || [];
if (selected.length == 0)
items.length = 0;
else {
$.each(selected, function(i) {
if (items.indexOf(selected[i]) == -1) {
items.push(selected[i]);
alert(selected[i]);
}
});
}
});
</script>
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>