Why is chosen preventing a JavaScript conditional from working properly?

Why is chosen preventing a JavaScript conditional from working properly? - javascript

There are two snippets below. I'm using Bootstrap 3 and Chosen for my select menus.
The functionality with the following is that when a specific selection is made (i.e.; Social Services), then a second select menu displays. That menu goes away if Defendant, Minor or Witness are selected. The piece that controls this is here:
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 5 ? "block" : "none";
document.getElementById("form2").style.display = style;
});
Snippet 1: I am able to use chosen, but when I select Social Services, the second select menu doesn't come up. In order for chosen to work, the chosen class must be set to a width: 100%;, which is this piece:
$(".chosen-select").chosen({
width: "100%"
});
$(".chosen-select").chosen({
width: "100%"
});
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 5 ? "block" : "none";
document.getElementById("form2").style.display = style;
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen#1.4.2/bootstrap-chosen.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="container">
<div class="panel-body">
<div class="col-sm-6 b-r">
<div class="form-group">
<label for="form1">Involved How?</label>
<select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
<option value="1">Defendant</option>
<option value="2">Minor</option>
<option value="3">Witness</option>
<option value="4">Social Services</option>
<option value="5">Prosecution</option>
</select>
</div>
</div>
<div class="col-sm-6 b-r">
<div class="form-group" id="form2" style="display: none;">
<label for="form2">Agency</label>
<select name="form2" class="form-control chosen-select">
<option value="1">Legal Services</option>
<option value="2">Social Services</option>
<option value="3">Prosecutor's Office</option>
</select>
</div>
</div>
</div>
</div>
Snippet 2: If I remove the snippet:
$(".chosen-select").chosen({
width: "100%"
});
...then the select menu turns back into it's native format (without chosen) and allows me to choose Social Services and display the second select menu, but the chosen functionality doesn't work in that first select menu.
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 5 ? "block" : "none";
document.getElementById("form2").style.display = style;
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen#1.4.2/bootstrap-chosen.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="container">
<div class="panel-body">
<div class="col-sm-6 b-r">
<div class="form-group">
<label for="form1">Involved How?</label>
<select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
<option value="1">Defendant</option>
<option value="2">Minor</option>
<option value="3">Witness</option>
<option value="4">Social Services</option>
<option value="5">Prosecution</option>
</select>
</div>
</div>
<div class="col-sm-6 b-r">
<div class="form-group" id="form2" style="display: none;">
<label for="form2">Agency</label>
<select name="form2" class="form-control chosen-select">
<option value="1">Legal Services</option>
<option value="2">Social Services</option>
<option value="3">Prosecutor's Office</option>
</select>
</div>
</div>
</div>
</div>
The only difference here is this:
$(".chosen-select").chosen({
width: "100%"
});
Does anyone know why this is happening or if there is a workaround for it?

The issue is because Chosen raises jQuery-based events, so using addEventListener() won't detect them. You need to use jQuery's on() method instead:
$(".chosen-select").chosen({
width: "100%"
});
$("#form1").on("change", function() {
$("#form2").toggle(this.value == 4 || this.value == 5);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen#1.4.2/bootstrap-chosen.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="container">
<div class="panel-body">
<div class="col-sm-6 b-r">
<div class="form-group">
<label for="form1">Involved How?</label>
<select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
<option value="1">Defendant</option>
<option value="2">Minor</option>
<option value="3">Witness</option>
<option value="4">Social Services</option>
<option value="5">Prosecution</option>
</select>
</div>
</div>
<div class="col-sm-6 b-r">
<div class="form-group" id="form2" style="display: none;">
<label for="form2">Agency</label>
<select name="form2" class="form-control chosen-select">
<option value="1">Legal Services</option>
<option value="2">Social Services</option>
<option value="3">Prosecutor's Office</option>
</select>
</div>
</div>
</div>
</div>

Related

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop

You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>

Disable select boxes if text field has a value

I am trying to disable 2 select boxes if an input text field has a value. If the value of the input text field is cleared, the select boxes should be enabled again. It seems to work well the first time or if I never touch either one of the select boxes but it seems if I even active them, they will not disable again. For example, if I enter text into the input box the 2 select boxes are disabled and if I clear it they are enabled again, but then when I type in the text box to disable them again it does not work if I have activated either of the select boxes.
HTML
<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
<div class="form-group col-md-4">
<input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Borough" multiple data-live-search="true" multiple data-max-options="1"
id="boroughselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Neighborhood" multiple data-live-search="true" multiple data-max-options="1"
id="neighborhoodselect">
</select>
</div>
</div>
JS
$("#zipcode").keyup(function() {
var zipcode = $("#zipcode").val();
if (zipcode != "") {
console.log('disabled');
document.getElementById("boroughselect").disabled = true;
document.getElementById("neighborhoodselect").disabled = true;
} else if (zipcode == "") {
console.log('enabled');
document.getElementById("boroughselect").disabled = false;
document.getElementById("neighborhoodselect").disabled = false;
}
});

I do not know what you did with your real code, but it works perfectly in JS
const sel_1 = document.querySelector('#boroughselect' )
, sel_2 = document.querySelector('#neighborhoodselect' )
, zipcode = document.querySelector('#zipcode' )
zipcode.oninput=_=>
{
sel_1.disabled = sel_2.disabled = (zipcode.value!=='')
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
<div class="form-group col-md-4">
<input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Borough" data-live-search="true" id="boroughselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Neighborhood" data-live-search="true" id="neighborhoodselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>

Your code looks fine it's only the way you handle the disabled attribute needs a bit fix.
$('#zipcode').on('keyup', function () {
if ($(this).val().length) {
$('#boroughselect').attr('disabled', true);
$('#neighborhoodselect').attr('disabled', true);
console.log('disabled');
} else {
$('#boroughselect').attr('disabled', false);
$('#neighborhoodselect').attr('disabled', false);
console.log('enabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><b>Area Search:</b> Choose one </p>
<div class="form-group row">
<div class="form-group col-md-4">
<input type="text" class="form-control" id="zipcode" placeholder="Zip Code">
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Borough" multiple data-live-search="true" multiple data-max-options="1"
id="boroughselect">
<option value="BX">Bronx</option>
<option value="BK">Brookyln</option>
<option value="MN">Manhattan</option>
<option value="SI">Staten Island</option>
<option value="QN">Queens</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="form-group col-md-4">
<select class="selectpicker" title="Neighborhood" multiple data-live-search="true" multiple data-max-options="1"
id="neighborhoodselect">
</select>
</div>
</div>

How to deselect all selected values from bootstrap-multiselect with reset button?

I am having issues when trying to select the element which contains all the selected values.
For example: if you select by id such as
$('#campaign-select').multiselect('refresh'),
it is not doing anything. Why is that?
Please see jsFiddle
FIXED IT!
$('#filter-reset-btn').on('click', function () {
$('#campaigns-select').multiselect('rebuild');
/* resetting the select element to refresh*/
$('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select option:selected').each(function () {
$(this).prop('selected', false);
})
$('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select').val([]).multiselect('refresh')
});
Here is updated to jsFiddle

You need to set the value to an empty array before refreshing the multi select. Also, note that you are missing an "s" in "campaign" inside you selector.
Use this: $('#campaigns-select').val([]).multiselect('refresh')

According to the documentation you can use:
.multiselect('deselectAll', justVisible): Deselects all options. If justVisible is set to true or not provided, all visible options are deselected, otherweise (justVisible set to false) all options are deselected.
After calling the previous method you need to updateButtonText:
.multiselect('updateButtonText'): When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.
Hence you can write:
$('#campaigns-select').multiselect('deselectAll', false);
$('#campaigns-select').multiselect('updateButtonText');
var msOptions = {
includeSelectAllOption: true,
enableFiltering: true,
selectAllJustVisible: false,
buttonWidth: '80%',
buttonText: function (options, select) {
return options.length + ' selected';
}
};
$('#campaigns-select').multiselect(msOptions);
$('#sites-select').multiselect(msOptions);
$('#mdmadservers-select').multiselect(msOptions);
$('#ratetypes-select').multiselect(msOptions);
$('#filter-reset-btn').on('click', function () {
$('#campaigns-select').multiselect('deselectAll', false);
$('#campaigns-select').multiselect('updateButtonText');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.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-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<div id="wrapper">
<!--SideBar-->
<div id="sidebar-wrapper">
<div class="sidebar-header" style="text-align:center;">Filters</div>
<div id="sidebar-filter panel panel-default">
<div class="form-group">
<div class="text-caption" style="margin-top:20px;">Date Range</div>
<div style="width: 80%;margin-left: 30px">
<input type='text' name="daterange" class="form-control" value=""/>
</div>
</div>
<div class="form-group">
<div class="text-caption">Campaign</div>
<select class="form-control campaigns-select-class" id="campaigns-select" multiple="multiple">
<option value="2929">TestCampaign1</option>
<option value="2930">TestCampaign2</option>
<option value="2931">TestCampaign3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">Site</div>
<select class="form-control sites-select" id="sites-select" multiple>
<option value="1010">TestSite1</option>
<option value="1011">TestSite2</option>
<option value="1012">TestSite3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">Server</div>
<select class="form-control mdmadservers-select" id="mdmadservers-select" multiple>
<option value="1"> TestServer1</option>
<option value="2"> TestServer2</option>
<option value="3"> TestServer3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">Rate Type</div>
<select class="form-control ratetypes-select" id="ratetypes-select" multiple>
<option value="Test1">Test1</option>
<option value="Test2">Test2</option>
<option value="Test3">Test3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">
<input type="checkbox" class="hide-completed-entries" id="hide-completed-entries" checked="checked">
Hide Completed
</div>
</div>
<button type="button" class="btn btn-success btn-block" id="filter-btn">Apply</button>
<button type="button" class="btn btn-primary btn-block resetfilters" id="filter-reset-btn">Reset</button>
</div>
</div>
</div>

try it!
$('#campaign-select').multiselect({
buttonWidth: 330,
includeSelectAllOption: true,
allSelectedText: 'Clean all',
onSelectAll: function (options) {
$("#campaign-select").multiselect("clearSelection");
}
});
Or adding Reset button
$('#campaigns-select').multiselect({
buttonWidth: 330,
enableResetButton: true,
resetText: "Clean"
});
Print 01
Print 02

html with several drop downs each with its own show/hide textarea

I have html with several drop downs. Depending on the each selection a textarea shows for description. Right now I have a show and hide in javascript for each question. Is there a way to concise this so that I dont have to write show/hide for each question. What I mean is, Is there a way that my javascript will be more concise?
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Food Selection</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#spicyFoodField').on('change', function() {
if (this.value == 'spicyFoodDesc') {
$("#spicyFoodDesc").show();
} else {
$("#spicyFoodDesc").hide();
}
});
});
$(document).ready(function() {
$('#sweetFoodField').on('change', function() {
if (this.value == 'sweetFoodDesc') {
$("#sweetFoodDesc").show();
} else {
$("#sweetFoodDesc").hide();
}
});
});
$(document).ready(function() {
$('#blandFoodField').on('change', function() {
if (this.value == 'blandFoodDesc') {
$("#blandFoodDesc").show();
} else {
$("#blandFoodDesc").hide();
}
});
});
</script>
</head>
<body>
<div class="w3-row-padding" id="spicyFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like spicy food?</b></label>
<p>
<select id="spicyFoodField">
<option value="" disabled selected>Select...</option>
<option value="spicyFoodDesc">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" id="spicyFoodDesc" name="spicyFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="sweetFoodField">
<option value="" disabled selected>Select...</option>
<option value="sweetFoodDesc">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" id="sweetFoodDesc" name="sweetFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="blandFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="blandFoodField">
<option value="" disabled selected>Select...</option>
<option value="blandFoodDesc">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" id="blandFoodDesc" name="blandFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
</body>
</html>

There is certainly a way to achieve what you're after, and my preference is to use a combination of one event listener, and data attributes.
The idea is that you apply one event that fires on the change of any select, rather than having one for each.
$("select").on("change", ...);
To find out exactly which one changed, you can use $(this). Therefore, $(this).val() will tell us if the dropdown is switching to "yes" or "no".
var selectedValue = $(this).val();
We can add the parameter data-for-id to each description, and set it to the ID of the associated select. For example, if you have a select with an id of mySelect, the textarea would have data-for-id="mySelect".
<select id="spicyFoodField">
....
</select>
<textarea data-for-id="spicyFoodField" />
Now we've created a link between our select and its textarea. Let's implement that in our jQuery code, so that when the select gets changed, it knows what textarea to look for:
//Set the associated text area to whatever textarea has
//the same data-for-id as the changing select list
var $associatedTextarea = $("textarea[data-for-id=" + $(this).attr("id") + "]");
Finally, we can implement our logic to hide the area, or show the area:
if (selectedValue == "yes") {
$associatedTextarea.show();
} else {
$associatedTextarea.hide();
}
Now, any time we want to add a new Select / Textarea, all we have to do is put data-for-id="associated-select-id" on the textarea, and the code will handle the rest.
Complete example:
$(document).ready(function() {
$("select").on("change", function() { //When a select changes
var selectedValue = $(this).val(); //Check its new value
//Get associated textarea
var $associatedTextarea = $("textarea[data-for-id=" + $(this).attr("id") + "]");
if (selectedValue == "yes") {
$associatedTextarea.show();
} else {
$associatedTextarea.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<div class="w3-row-padding" id="spicyFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like spicy food?</b></label>
<p>
<select id="spicyFoodField">
<option value="" disabled selected>Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" data-for-id="spicyFoodField" id="spicyFoodDesc" name="spicyFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="sweetFoodField">
<option value="" disabled selected>Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" data-for-id="sweetFoodField" id="sweetFoodDesc" name="sweetFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="blandFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="blandFoodField">
<option value="" disabled selected>Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" data-for-id="blandFoodField" id="blandFoodDesc" name="blandFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>

Bootstrap Multi-select - adding images after checkboxes

Firstly here's the fiddle
I'm trying to add image after the checkbox for Bootstrap multi-select plugin, after each check box or before it I'm trying to add a thumbnail, here's what I did till now:
Adding images directly in each option but this plugin removes all html in
Used jquery after() to add image after the field but it does not work.
HTML Code:
<div class="col-sm-12">
<div id="vm" class="tab-pane fade in active">
<div class="panel panel-primary">
<div class="panel-body">
<form action="/Lab/Rtx/etabs/edit/0451483t" id="ServerEditForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
</div>
<div class="col-md-8">
<div class="form-group">
<input type="hidden" name="data[Server][0][id]" class="form-control" value="1" id="Server0Id">
<div class="controls">
<label for="Server0Vm">hosta0451483t</label>
<input type="hidden" name="data[Server][0][Vm]" value="" id="Server0Vm_">
<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
<optgroup>
<option value="ctrlr0451483t">ctrlr0451483t</option>
<option value="ipr0451483t">ipr0451483t</option>
<option value="ldap0451483t">ldap0451483t</option>
<option value="proxy0451483t">proxy0451483t</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
jQuery Code:
$(document).ready(function() {
$('.multiselect').multiselect({
buttonWidth: 'auto',
numberDisplayed:15,
onChange: function(element, checked) {
//console.log(element.attr('value') + checked);
$("ul.multiselect-container").find("input[type=checkbox]").each(function(){
//console.log(element.attr('value'));
var valueAttr = $(this).attr('value');
if (element.attr('value') == valueAttr) {
var checkParent = $(this).parent().parent().parent().hasClass('active');
//console.log(checkParent);
if (checkParent == false) {
$(this).removeAttr('disabled')
}else{
$(this).attr('disabled','disabled')
}
}
});
}
});
});
Any help would be appreciated.

You can use optionLabel option
optionLabel A callback used to define the labels of the options
$('.multiselect').multiselect({
enableHTML: true,
optionLabel: function(element) {
return '<img src="'+$(element).attr('data-img')+'"> '+$(element).text();
},
// ...
});
HTML:
<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
<optgroup>
<option data-img="1.png" value="ctrlr0451483t">ctrlr0451483t</option>
<option data-img="2.png" value="ipr0451483t">ipr0451483t</option>
<option data-img="3.png" value="ldap0451483t">ldap0451483t</option>
<option data-img="4.png" value="proxy0451483t">proxy0451483t</option>
</optgroup>
</select>
JSFiddle

You can try this:
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true,
enableHTML: true,
optionLabel: function(element) {
return '<img src="https://placekitten.com/'+ $(element).attr('data-img')+'"> '+ $(element).text();
},
});
$('#btnget').click(function() {
alert($('#chkveg').val());
});
});
.multiselect-container>li>a>label {
padding: 4px 20px 3px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="http://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="http://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="http://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple>
<option value="cheese" data-img="100/109">AAA</option>
<option value="tomatoes" data-img="100/108">BBB</option>
<option value="mozarella" data-img="100/107">CCC</option>
<option value="mushrooms" data-img="100/106">DDD</option>
<option value="pepperoni" data-img="100/105">EEE</option>
<option value="onions" data-img="100/110">FFF</option>
</select>
<br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
</div>
</form>

Develop Reference

JavaScript is the programming language of the Web.

Why is chosen preventing a JavaScript conditional from working properly? - javascript

Related

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

Disable select boxes if text field has a value

How to deselect all selected values from bootstrap-multiselect with reset button?

html with several drop downs each with its own show/hide textarea

Bootstrap Multi-select - adding images after checkboxes

Categories

Resources