I am using a jQuery plug-in: bootstrap-select.js my HTML is select(multiple) -> option. I would like to get the currently clicked on option value when a user selects or deselects the option.
Example: User selects Item 4 = console.log item 4. Then the user also selects Item 2 = console.log item 2. Currently i'm getting item 4, item 2... they are always in a array and not individual.
My end goal is to show and hide divs on the page depending on what the user has selected. There will be multiple select option fields.
HTML code:
<fieldset class="dreamT">
<select name="team" id="team" multiple class="dropdown selectpicker show-menu-arrow show-tick form-control" title="Pelaajat" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 2">
<optgroup>
<option value="item 1">Item 1</option>
<option value="item 2">Item 2</option>
<option value="item 3">Item 3</option>
<option value="item 4">Item 4</option>
<option value="item 5">Item 5</option>
<option disabled value="item 6">Item 6</option>
</optgroup>
</select>
</fieldset>
JS code:
$("select#team").on("change", function(value){
var This = $(this);
var selectedD = $(this).val();
console.log(selectedD);
});
Current output: ["item 1", "item 3", "item 4", "item 5"]
Plug-in site: bootstrap-select
As described in the bootstrap-select events you can use changed.bs.select event.
This event fires after the select's value has been changed. It passes through the following 4 arguments:
event
clickedIndex
isSelected
previousValue
$(function () {
$('#team').selectpicker();
$("#team").on("changed.bs.select", function(e, clickedIndex, isSelected, oldValue) {
if (clickedIndex == null && isSelected == null) {
var selectedItems = ($(this).selectpicker('val') || []).length;
var allItems = $(this).find('option:not([disabled])').length;
if (selectedItems == allItems) {
console.log('seleted all');
} else {
console.log('deseleted all');
}
} else {
var selectedD = $(this).find('option').eq(clickedIndex).text();
console.log('selectedD: ' + selectedD + ' oldValue: ' + oldValue);
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<fieldset class="dreamT">
<select name="team" id="team" multiple class="selectpicker show-menu-arrow show-tick form-control" title="" multiple data-actions-box="true"
data-width="100%" data-size="auto" multiple data-selected-text-format="count > 2">
<optgroup>
<option value="item 1">Item 1</option>
<option value="item 2">Item 2</option>
<option value="item 3">Item 3</option>
<option value="item 4">Item 4</option>
<option value="item 5">Item 5</option>
<option disabled value="item 6">Item 6</option>
</optgroup>
</select>
</fieldset>
Or just have the event on the option elements...
$("option").on("click", function(value){
var This = $(this);
var selectedD = $(this).val();
console.log(selectedD);
});
https://jsfiddle.net/adjavaherian/ssqz4sh8/
Try this:
console.log(("#your-id option:selected").text());
ref : enter link description here
Or just look for any changes on the element and get the value if changed.
$("#components").on("change", function(e) {
var selected = document.querySelector("#components").selectedOptions[0].value
alert(selected)
});
Related
Hello i have this drop down list menu and i want to make a script that when i select only the last option the labels change in html. This is my code i have done until now:
<select id='type' name='type' class="form-control" onchange="loadText(this)">
<option value="S">S</option>
<option value="B">B</option>
<option value="F">F</option>
</select>
<script>
function loadText(select) {
alert(select.options[select.valueOf(2)].text);
}
</script>
I tried to get the value of the selected option but it wont work, before i had it
select.selectedIndex
but i want this function to work only for the last value not for all 3
<select id='type' name='type' class="form-control" onchange="loadText(this)">
<option value="S">S</option>
<option value="B">B</option>
<option value="F">F</option>
</select>
<script>
function loadText(select) {
var select = document.getElementById('type');
var lastValue = select.options[select.options.length - 1].value;
var selectedValue = select.options[select.selectedIndex].text;
if (lastValue === selectedValue) {
alert(selectedValue);
}
}
</script>
One day I had a problem with PHP and a super guy resolved my problem, this time I learn JavaScript, and I'm really stuck on a project.
Here is the fiddle: https://jsfiddle.net/xasal/8c0kdqm4/5/
As you see, I have 2 selectors, on the left, the user see his characters, at the right, he can chose to switch his "race", the problem is I want JavaScript to run something when the guy selects his character at the left to compare with the right one and automatically delete the option if it's for the same race.. I made the functions for all to disappear, the only problem is the compare value... and when I think my code is nice I have issues in the dev console of unexpected end or syntax
Uncaught SyntaxError: Unexpected end of input
Sorry if it's kinda easy for you I'm really new :x
<select id="charSelect" name="charSelection">
<option value="Knight" selected="selected"><span id="charName">Gooffy</span> - <span class="charJob" onclick="detectChanges()">Knight</span> - lv.<span id="charLvl">175</span></option>
<option value="NightShadow"><span>Soul</span> - <span class="charJob" onclick="detectChanges()">NightShadow</span> - lv.<span>175</span></option>
<option value="Rogue"><span>Veli</span> - <span class="charJob" onclick="detectChanges()">Rogue</span> - lv.<span>175</span></option>
</select>
</section>
<input type="submit" value="Change my class to">
<section class="rightSelect">
<select class="jobSelect" name="jobSelection">
<option value="titan" id="titan" class="charJobChange" selected="selected">Titan</option>
<option value="knight" id="knight" class="charJobChange">Knight</option>
<option value="healer" id="healer" class="charJobChange">Healer</option>
<option value="mage" id="mage" class="charJobChange">Mage</option>
<option value="rogue" id="rogue" class="charJobChange">Rogue</option>
<option value="sorcerer" id="sorcerer" class="charJobChange">Sorcerer</option>
<option value="nightshadow" id="nightshadow" class="charJobChange">NightShadow</option>
</select>
function removeNS() { // example with Hide NS = nightshadow
$('#nightshadow').hide();
console.log("loaded");
}
function selectedCh(){
if($("#leftSelect select").find("option:selected").val() == "NightShadow") {
removeNS();
}
selectedCh();
Try this instead.
I called the function in onchange="selectedCh()" of left select box.
function selectedCh(){
// to get selected option in left select box in lowercase
var selectedtitem = $(".leftSelect select").find("option:selected").val().toLowerCase();
// to get total number of options in right select box
var oplen = $(".rightSelect select option").length;
// enable all option in right select box
$(".rightSelect select option").show();
// Loop for checking the selected option equals to any option in right select box
for(i=1;i<=oplen;i++){
if($(".rightSelect select option:nth-child("+i+")").val() == selectedtitem){
// to hide if equals in right select box option
$(".rightSelect select option:nth-child("+i+")").hide();
}
}
}
// to check first run the code
selectedCh();
Working demo
function selectedCh(){
var selectedtitem = $(".leftSelect select").find("option:selected").val().toLowerCase();
var oplen = $(".rightSelect select option").length;
$(".rightSelect select option").show();
for(i=1;i<=oplen;i++){
if($(".rightSelect select option:nth-child("+i+")").val() == selectedtitem){
$(".rightSelect select option:nth-child("+i+")").hide();
}
}
}
selectedCh();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="leftSelect">
<select id="charSelect" name="charSelection" onchange="selectedCh()">
<option value="Knight" selected="selected"><span id="charName">Gooffy</span> - <span class="charJob" onclick="detectChanges()">Knight</span> - lv.<span id="charLvl">175</span></option>
<option value="NightShadow"><span>Soul</span> - <span class="charJob">NightShadow</span> - lv.<span>175</span></option>
<option value="Rogue"><span>Veli</span> - <span class="charJob" >Rogue</span> - lv.<span>175</span></option>
</select>
</section>
<section class="rightSelect">
<select class="jobSelect" name="jobSelection">
<option value="titan" id="titan" class="charJobChange" selected="selected">Titan</option>
<option value="knight" id="knight" class="charJobChange">Knight</option>
<option value="healer" id="healer" class="charJobChange">Healer</option>
<option value="mage" id="mage" class="charJobChange">Mage</option>
<option value="rogue" id="rogue" class="charJobChange">Rogue</option>
<option value="sorcerer" id="sorcerer" class="charJobChange">Sorcerer</option>
<option value="nightshadow" id="nightshadow" class="charJobChange">NightShadow</option>
</select>
</section>
Hide option if value == 'option 3'
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectName">
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3 (hide on chnage)</option>
<option value="option 4">Option 4</option>
<option value="option 5">Option 5</option>
</select>
<script>
$('#selectName').on('change', function () {
if ($(this).val() == 'option 3') {
$('option[value="option 3"]',this).hide();
} else {
$('option[value="option 3"]',this).show();
}
}).trigger('change');;
</script>
Just use a query selector for find the matching option and hide it. Here is a minimal example:
var charSelect = document.querySelector('select[name="charSelection"]');
var jobSelect = document.querySelector('select[name="jobSelection"]');
charSelect.addEventListener('change', function(){
// Unhide any hidden options
jobSelect.querySelectorAll('option').forEach(opt=>opt.style.display = null);
// Hide the option that matches the above selected one
var value = this.value.toLowerCase();
jobSelect.querySelector(`option[value="${value}"]`).style.display = "none";
});
<select name="charSelection">
<option value="Knight" selected="selected">Knight</option>
<option value="NightShadow">NightShadow</option>
<option value="Rogue">Rogue</option>
</select>
<select name="jobSelection">
<option value="titan" selected="selected">Titan</option>
<option value="knight">Knight</option>
<option value="healer">Healer</option>
<option value="mage">Mage</option>
<option value="rogue">Rogue</option>
<option value="sorcerer">Sorcerer</option>
<option value="nightshadow">NightShadow</option>
</select>
i have this code:
$("#country").change(function() {
if ($(this).data('options') === undefined) {
$(this).data('options', $('#street option').clone());
}
var id = $(this).val();
$('#street').prop('disabled', false);
var options = $(this).data('options').filter('[class=' + id + ']');
$('#street').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="country">
<option disabled selected>Select ...</option>
<option value='1'>Country_one</option>
<option value='2'>Country_two</option>
<option value='3'>Country_three</option>
<option value='4'>Country_four</option>
</select>
<select disabled class="js-select2" name="street" id="street">
<option disabled selected>Select a Street ...</option>
<option class='1' value='1'>Street_one</option>
<option class='1' value='2'>Street_two</option>
<option class='1' value='3'>Street_three</option>
<option class='1' value='4'>Street_four</option>
<option class='2' value='5'>Street_five</option>
<option class='2' value='6'>Street_six</option>
<option class='3' value='7'>Street_seven</option>
<option class='3' value='8'>Street_eight</option>
<option class='3' value='9'>Street_nine</option>
<option class='3' value='10'>Street_ten</option>
<option>Street not found</option>
</select>
I need when change the option from country in the second dropdownlist stays the Select a Street ... option and when i select the Country_four in the seccond dropdownlist only appears the option Street not found
Added a class default to your select option "Select a street", and added to the .filter() so it will always be selected
Added if / else to check the value selected - If it's anything but 4; Rebuild the options, and Enable the select. If it's 4; Empty the options, Add "Street not found" option, and Disable the select. After both of these, we select the first option so we're always showing the right message first
$('#country').on('change', function() {
// Stores the intial Options into a Data-attribute
if ($(this).data('options') === undefined) {
$(this).data('options', $('#street option').clone());
}
if ($(this).val() !== '4') {
// Fetches the Options from data, and filters for match & default option
let id = $(this).val();
let newOptions = $(this).data('options').filter(`[class="${id}"], [class="default"]`);
$('#street')
.empty()
.append(newOptions)
.prop('disabled', false)
} else {
// Creates an Option, containing only text
let newOptions = $('<option></option>').text("Street not found");
$('#street')
.empty()
.append(newOptions)
.prop('disabled', true)
}
// Selects the first Option in the Select
$('#street')[0].selectedIndex = 0
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="country" id="country">
<option disabled selected>Select ...</option>
<option value='1'>Country_one</option>
<option value='2'>Country_two</option>
<option value='3'>Country_three</option>
<option value='4'>Country_four</option>
</select>
<select disabled class="js-select2" name="street" id="street">
<option class="default" disabled selected>Select a Street ...</option>
<option class='1' value='1'>Street_one</option>
<option class='1' value='2'>Street_two</option>
<option class='1' value='3'>Street_three</option>
<option class='1' value='4'>Street_four</option>
<option class='2' value='5'>Street_five</option>
<option class='2' value='6'>Street_six</option>
<option class='3' value='7'>Street_seven</option>
<option class='3' value='8'>Street_eight</option>
<option class='3' value='9'>Street_nine</option>
<option class='3' value='10'>Street_ten</option>
<option>Street not found</option>
</select>
I have a form, and I'm trying to disable or hide options in a select form element which have a particular data-id attribute. Example form:
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
I would like to hide (and disable for browsers which don't support hiding) the options with data-id of "notAvailable".
Here is what I've tried:
<script>
$(document).ready(function () {
//hide unavailable options
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
</script>
My selector seems to fail, because when I the below code to log the result, I get "notAvailable : undefined" 127 times (one for each option in my form)
<script>
$(document).ready(function () {
//test by logging
var unavailable = notAvailable;
$('#fuu select option').each(function (event) {
if ($(this).attr("data-id") !== unavailable) {
var loggedID = $(this).attr("data-id");
console.log(unavailable + " : " + loggedID);
}
});
});
</script>
Thank you for your help!
Try following code:
$("#fuu select option[data-id='notAvailable']").hide().prop('disabled', true);
Try This :
$(document).ready(function(){
$('select option').each(function(){
if($(this).attr('data-id')=='notAvailable'){
$(this).prop('disabled',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
<select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
Provide this under quotes var unavailable = "notAvailable";
Change the condition as $(this).attr("data-id") == unavailable
Example:
$(document).ready(function() {
//hide unavailable options
var unavailable = "notAvailable";
$('#fuu select option').each(function(event) {
if ($(this).attr("data-id") == unavailable) {
$(this).hide().prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="fuu">
<select name="bar1">
<option value="option1" data-id="available">Option 1</option>
<option value="option2" data-id="notAvailable">Option 2</option>
<option value="option3" data-id="available">Option 3</option>
</select>
<select name="bar2">
<option value="anotherOption1" data-id="available">Option 1</option>
<option value="anotherOption2" data-id="notAvailable">Option 2</option>
<option value="anotherOption3" data-id="available">Option 3</option>
</select>
</fieldset>
Say I have this dropdown:
<select id="theOptions1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I want it so that when the user selects 1, this is the thing that the user can choose for dropdown 2:
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Or if the user selects 2:
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
</select>
Or if the user selects 3:
<select id="theOptions2">
<option value="b">b</option>
<option value="c">c</option>
</select>
I tried the code posted here:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
But it doesn't work for selects.
Please help!
Thank you!
UPDATE:
I really like the answer Paolo Bergantino had on:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
Is there anyway to modify this to work with selects instead of radio buttons?
jQuery.fn.filterOn = function(radio, values) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(radio).click(function() {
var options = $(select).empty().data('options');
var haystack = values[$(this).attr('id')];
$.each(options, function(i) {
var option = options[i];
if($.inArray(option.value, haystack) !== -1) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
This works (tested in Safari 4.0.1, FF 3.0.13):
$(document).ready(function() {
//copy the second select, so we can easily reset it
var selectClone = $('#theOptions2').clone();
$('#theOptions1').change(function() {
var val = parseInt($(this).val());
//reset the second select on each change
$('#theOptions2').html(selectClone.html())
switch(val) {
//if 2 is selected remove C
case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
//if 3 is selected remove A
case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
}
});
});
And the beautiful UI:
<select id="theOptions1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
You can add classes to your <option>s to store which go with each value of #theOptions1:
<select id="theOptions2">
<option value="a" class="option-1 option-2">a</option>
<option value="b" class="option-1 option-2 option-3">b</option>
<option value="c" class="option-1 option-3">c</option>
</select>
then do this:
$(function() {
var allOptions = $('#theOptions2 option').clone();
$('#theOptions1').change(function() {
var val = $(this).val();
$('#theOptions2').html(allOptions.filter('.option-' + val));
});
});
For the record you can NOT remove options in a select list in Internet Explorer.
try this. this will definitely work
$(document).ready(function () {
var oldValue;
var oldText;
var className = '.ddl';
$(className)
.focus(function () {
oldValue = this.value;
oldText = $(this).find('option:selected').text();
})
.change(function () {
var newSelectedValue = $(this).val();
if (newSelectedValue != "") {
$('.ddl').not(this).find('option[value="' + newSelectedValue + '"]').remove();
}
if ($(className).not(this).find('option[value="' + oldValue + '"]').length == 0) { // NOT EXIST
$(className).not(this).append('<option value=' + oldValue + '>' + oldText + '</option>');
}
$(this).blur();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="/Home/Ex2" method="post">
<select class="ddl" id="A1" name="A1">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A2" name="A2">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A3" name="A3">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A4" name="A4">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<input type="submit" name="submit" value="Save Data" id="btnSubmit" />
</form>
Actually, using the code below will remove a dropdown option just fine in IE, as long as it is not the selected option (it will not work on "a" without deselecting that option first):
var dropDownField = $('#theOptions2');
dropDownField.children('option:contains("b")').remove();
You just run this to remove whatever option you want to remove under a conditional statement with the first group (theOptions1) - that if one of those is selected, you run these lines:
var dropDownField = $('#theOptions2');
if ($('#theOptions1').val() == "2") {
dropDownField.children('option:contains("c")').remove();
}
if ($('#theOptions1').val() == "3") {
$("#theOptions2 :selected").removeAttr("selected");
$('#theOptions2').val('b');
dropDownField.children('option:contains("a")').remove();
}
-Tom