I have a select picker element like this in my web page :
<select id="difficulty" name="difficulty" class="selectpicker" multiple onchange="ChangeFilters()">
<option value="-1" selected >All</option>
<option value="0" >Facile</option>
<option value="1" >Normal</option>
<option value="2" >Difficile</option>
</select>
I want that when the user select the "All" options (value = '-1') , if there are other options selected they become not selected, and if the option all is selected when the user select an other options the "all option" become not selected.
I have searched for like 2 hours and i can't make this working.
I work with bootstrap and this select element is a selectpicker element, my javascript don't work when i try something ..
Please help !
EDIT :
I posted the working code as an answer, thanks for your help !
Something like this?
function ChangeFilters(){
var selVal = $('#difficulty').val()[0];
if(selVal == -1){
$('#difficulty').attr('multiple',false);
}else{
$('#difficulty').attr('multiple',true);
}
}
With the help of this post Select all / Unselect all in Bootstrap Select plugin
This is the full working code which allow the user to select the All option, 3 difficulties, or nothing :
HTML :
<select id="difficulty" name="difficulty" class="selectpicker" multiple onchange="ChangeFilters()">
<option value="All" selected >Tous</option>
<option value="0" >Facile</option>
<option value="1" >Normal</option>
<option value="2" >Difficile</option>
</select>
Javascript :
//This need to be on your page load or other load event before the first onChange.
$('#difficulty').data('allOptionIsSelected', true);
function ChangeFilters() {
if ($('#difficulty') != null) {
if ($('#difficulty').val() != null) {
var allOptionIsSelected = ($('#difficulty').val() || []).indexOf("All") > -1;
function valuesOf(elements) {
return $.map(elements, function (element) {
return element.value;
});
}
if ($('#difficulty').data('allOptionIsSelected') != allOptionIsSelected) {
//User clicked 'All' option
if (allOptionIsSelected) {
$('#difficulty').selectpicker('val', ["All"]);
$('#difficulty').selectpicker('refresh');
} else {
}
} else {
// User clicked other option
if ($('#difficulty').val().length != $('#difficulty').find('option').length) {
//user clicked other
// All options were selected, user deselected one option
// => unselect 'All' option
$('#difficulty').selectpicker('val', valuesOf($('#difficulty').find('option:selected[value!=All]')));
allOptionIsSelected = false;
}
}
$('#difficulty').data('allOptionIsSelected', allOptionIsSelected);
}
$('#difficulty').selectpicker('refresh');
}
}
If you want to make this work with your project, change '#difficulty' to the id of your select control.
Thanks to #yuriy636 for the previous help :)
Related
Hello is there any way to disable multiple options in a select form if you only choose one option?
For example:
First Select Form
<select name="secondchoice" id="second">
<option value="None">None</option>
<option value="Content Dev">Content Dev</option>
<option value="Web">Web</option>
<option value="Science">Science</option>
<option value="Managing">Managing</option>
</select>
Second Select Form
<select name="day2" id="exam2">
<option value="None">None</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
</select>
If I select "None" in the first form then the second form must disable the options "Monday-Thursday" the only option available must be also "None" in the second form. Thank you!
You can do this with javascript by hiding options in the second elements whenever the first select element changes by checking its value and hiding elements accordingly like so:
// Select Elements
const first = document.getElementById('first')
const second = document.getElementById('second')
// Option Elements
const one = document.getElementById('one')
const two = document.getElementById('two')
// Runs whenever first select has changed
first.onchange = () => {
// Checks First Selects Value
if (first.value === '1') {
// If '1' then hide TWO and show ONE
second.value = 'ONE'
one.hidden = false
two.hidden = true
} else if (first.value === '2') {
// Else, if '2' then hide ONE and show TWO
second.value = 'TWO'
one.hidden = true
two.hidden = false
}
}
<select id='first'>
<option>1</option>
<option>2</option>
</select>
<select id='second'>
<option id='one'>ONE</option>
<option id='two'>TWO</option>
</select>
This is a very basic example and can be improved alot.
you can do something like below, so when you do selecting none, other options would be disabled, and other than none it would be enabled again
function disabledEnabled(event) {
var optiosLists = document.getElementById("exam2").options;
for (let i = 0; i < optiosLists.length; i++) {
if(event.target.value === "None"){
optiosLists[i].disabled = true;
optiosLists[0].disabled = false;
} else {
optiosLists[i].disabled = false;
}
}
}
You can either disabled select element itself and each of its options. You can find 2 ways to achieve each of those below.
Disabling Select Element
Disabling Option Element
I'm using Bootstrap 3.0 for Ruby on Rails 4.2.5, and I need to make it so that in this form when the user selects the option "No" from the drop down menu, the next text field is shown to them, otherwise, the text field remains hidden. I've found a similar question with this solution, but I couldn't implement it with the Bootstrap form, this is my attempt at it :
Dropdown Input:
<%= f.select :answer, [["Yes", 1], ["No", 0]], label: "Do you wish to bla bla? ", class: "selectpicker", Id: "selectpicker" %>
Toggled Input (should show when "No" is picked) :
<%= f.text_area :explain , label: "Please explain why not", Id: "sdd"%>
Javascript: `
("selectpicker").change(function changetextbox());
function changetextbox()
{
if (document.getElementById("selectpicker").value === 0 ) {
document.getElementById("sdd").disable='true';
} else {
document.getElementById("sdd").disable='false';
}
}
`
I tried changing value === 0 to value == 0 and the 0 to No, but it still doesn't work.
They're in my code in this order, but I'm not sure how this should work with the bootstrap form tags. Thanks in advance.
Reference : This is the question from which i got this code
Enable/disable of textbox on option selected from drop down menu
$(document).on('change', '#selectpicker', changetextbox);
function changetextbox() {
if (document.getElementById("selectpicker").value === '0') {
document.getElementById("sdd").disabled = true;
} else {
document.getElementById("sdd").disabled = false;
}
}
You forgot $ and there is no selectpicker selector, you have to use class or ID like .selectpicker or #selectpicker when you use jQuery (depends on your HTML).
There is no disable, you have to use disabled and you can't use quotation marks for true and false.
You can't use .change(function changetextbox()), just use $(document).on('change', '#selectpicker', changetextbox).
0 must be in quotation marks.
I assume your textarea is only disabled (not hidden by CSS).
CODEPEN EXAMPLE
Try :
<select id="selectbox" name="mfi_4_a_i">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" id="sdd" disabled="true" />
JS
$(function(){
var $sdd = $('#sdd');
$('#selectbox').on('change', function(){
if($(this).val()==='0'){
$sdd.prop("disabled", false);
}else{
$sdd.prop("disabled", true);
}
})
});
Also check https://jsfiddle.net/k5gy365k/3/
You need to update your code,
HTML
<select id="selectbox" name="mfi_4_a_i">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
<input type="text" name="mfi_4_a_ii" id="sdd" />
JS
$("#selectbox").change(function() {
changetextbox();
});
function changetextbox(){
if (document.getElementById("selectbox").value === '0') {
document.getElementById("sdd").disabled = true;
} else {
document.getElementById("sdd").disabled = false;
}
}
See the example: https://jsfiddle.net/8mag64es/6/
And if you want more cleaner jquery way, you can update your JS code as below,
var selectbox = $("#selectbox"),
textbox = $("#sdd");
selectbox.change(function() {
changetextbox();
});
function changetextbox(){
if (selectbox.val() === '0') {
textbox.prop('disabled', true);
} else {
textbox.prop('disabled', false);
}
}
Example: https://jsfiddle.net/8mag64es/8/
So I am trying to create a function that will validate if an option is selected in my Scrolling List. If nothing is selected, and alert will go off, if one is selected, then it passes validation. This is the code I am using:
<select id="topList" name="toppings" size="8" multiple>
<option value="opCream">Whipped Cream</option>
<option value="opFudge">Hot Fudge</option>
<option value="opMarsh">Marshmallow</option>
<option value="opCherry">Cherries</option>
<option value="opChocSprinkles">Chocolate Sprinkles</option>
<option value="opRainSprinkles">Rainbow Sprinkles</option>
<option value="opCheese">Cheesecake</option>
<option value="opOreo">Oreo Crumbles</option>
</select>
function checkScrollList() {
var ddl = document.getElementById("topList");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == false)
{
alert("Please select a sundae topping.");
}
}
Thanks for the suggestions!
You could use the selectedIndex property of the select object, like this:
function checkScrollList() {
var ddl = document.getElementById("topList");
if (ddl.selectedIndex === -1) {
alert("Please select a sundae topping.");
}
}
The selectedIndex property will give the zero-based index of the first selected option, so it is not useful for actually retrieving all the selected options. But it is guaranteed to be -1 when no options are selected.
I have HTML:
<select class="form" id="select" name="select">
<option>number1</option>
<option>number2</option>
</select>
<select name="organisation" class="form" id="cent" required>
<option value="1">UK</option>
<option value="2">SPAIN</option>
</select>
And another <select>:
<select class="form" id="ssip" name="organisation">
<option value="47" >US</option>
<option value="48">UKRAINE</option>
</select>
JQuery to show on 1 - first select on 2 - second
$(document).ready(function() {
$("#select").each(function () {
if (this.value == "1") {
$('#cent').show();
$('#ssip').hide();
}
if (this.value == "2") {
$('#cent').hide();
$('#ssip').show();
}
});
});
The problem is that when i choose option number1 appears first select with values 1 and 2 but when i select UK with value 1 and click submit it's sending value 47 , of second select's first option..
Try disabling the opposite select when toggling the selects. A control on a form will still be submitted if its display is set to none, however if the control is disabled it will not be submitted with the form.
$(document).ready(function() {
$("select").change(function () {
if (this.value == "number1") {
$('#cent').show().prop("disabled", false);
$('#ssip').hide().prop("disabled", true);
}
if (this.value == "number2") {
$('#cent').hide().prop("disabled", true);
$('#ssip').show().prop("disabled", false);
}
});
});
JS Fiddle: http://jsfiddle.net/bTJsH/
You are trying to loop one select box..
$("#select").each(function () {
There can be only one element with id "select". You should check like:
if ($("#select").value() == "1") { ..
And you don't even have values in your first select options..
i might suggest something like this
$('#select').on('change', function() {
var selected = this.selectedIndex;
$('.orgs').hide();
switch(selected) {
case 1:
$('#ssip').show();
break;
case 2:
$('#cent').show();
break;
}
});
here is an working example http://jsfiddle.net/pixelchemist/7ZGwy/
I have a select drop down menu. The menu is just for show and doesn't contribute anything to the form. However, I want option "b" to display an alert/message when it is selected/clicked BUT then I want option "a" selected after the user closes the alert (similar to disabled).
<select name="fake">
<option name="a">a</option>
<option name="b">b</option>
</select>
I found other javascript code, but nothing that suits my particular need.
EDIT
This is half way to what I need:
<select onchange="selectChangeHandler(this)">
<option>a</option>
<option>b</option>
</select>
<script>
function selectChangeHandler(selectNode) {
if (selectNode.selectedIndex !== 2) {
alert("I'm alert option!");
}
}
</script>
However, when the user selects option "b" and the alert is displayed, I want the option to revert back to option "a"
you can call a javascript function on call onchange() event.
HTML
<select name="fake" onchange="change(this);">
<option value="a" name="a">a</option>
<option value="b" name="b">b</option>
</select>
javascript,
<script>
function change(selBox) {
for(var i, j = 0; i = selBox.options[j]; j++) {
if(i.value == "b" && selBox.selectedIndex != 0) {
alert("you've clicked b");
selBox.selectedIndex = 0;
}
}
}
</script>
$('#chk').change(function(){
if($(this).val() === 'a')
alert("You Clicked a!");
});
where chk is the id of select element
if you are using name then
$('#chk').change(function(){
if($(this).attr('name') === 'a')
alert("You Clicked a!");
});
where chk is the id of select element