I am using Select2 dropdown, my requirement is to check uncheck checkbox value. If all options are selected then checkbox checked and if all options are not selected then checkbox uncheck.
HTML
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="checkbox" id="checkbox" >Select All
<input type="button" id="button" value="check Selected">
JS
$("#e1").select2();
$("#checkbox").click(function(){
if($("#checkbox").is(':checked') ){
$("#e1 > option").prop("selected","selected");
$("#e1").trigger("change");
}else{
$("#e1 > option").removeAttr("selected");
$("#e1").trigger("change");
}
});
$("#button").click(function(){
alert($("#e1").val());
});
Fiddle
http://jsfiddle.net/jEADR/62/.
You need to catch the change event, when event fire you need check how many options chosen and compare them with all of the options:
$("#e1").on("change", function(e) {
var count = this.selectedOptions.length // how options selected
var opt = this.length; // how options total
if (count===opt) {
// all selected
$("#checkbox").prop('checked', true);
} else {
// not all selected
$("#checkbox").prop('checked', false);
}
});
http://jsfiddle.net/jEADR/1834/
Related
I have this select2 where
If first option is selected, all other options should be disabled.
If any other option is selected, first option should be disabled.
Any help?
<select class="select2">
<option value="Package">Complete Package</option>
<option value="Hotel">Hotel Only</option>
<option value="Transport">Transport Only</option>
<option value="Misc">Misc</option>
</select>
Library select2
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js
https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css
**reference fiddle** : https://jsfiddle.net/bindrid/hpkqxto6/
<select multiple id="example" style="width: 300px">
<option value="Package">Complete Package</option>
<option value="Hotel">Hotel Only</option>
<option value="Transport">Transport Only</option>
<option value="Misc">Misc</option>
</select>
$(function() {
$('#example').select2();
//Select2 Event handler for selecting an item
$('#example').on("select2:selecting", function(evt, f, g) {
disableSel2(evt, this, true);
});
// Select2 Event handler for unselecting an item
$('#example').on("select2:unselecting", function(evt) {
disableSel2(evt, this, false);
});
});
// At some point during the select2 instantation it created the
// data object it needs with the source select option.
// This function, called by the events above to set the current status for the
// group for which the selected option belongs.
function disableSel2(evt, target, disabled) {
// Found a note in the Select2 formums on how to get the item to be selected
var selId = evt.params.args.data.id;
var aaList = $("option", target);
$.each(aaList, function(idx, item) {
var data = $(item).data("data");
if (selId == "Package") {
if(data.id != selId){
data.disabled = disabled;
$('#example > option').prop("selected", false);
}
}
})
}
I have the following code written in Razor view in MVC in C#. I want to select one of the item based on value but it is not working. I confirmed that the variable Facilities contain value Un-Funded but it doesn't select this item.
<select id="facilities" class="form-control" style="width:200px;">
<option #{ if (Facilities == "Funded") { Response.Write(" selected "); } }>Funded</option>
<option #{ if (Facilities == "Un-Funded") { Response.Write(" selected "); } }>Un-Funded</option>
</select>
Here's screenshot of how HTML looks like. Notice it is not printing selected for any of the option.
I am using Response.Write which doesn't work in Razor view. Using #Html.Raw("some string") fixed the issue. So the code will look like this:
#{ if(Facilities == "Funded") { #Html.Raw("selected='selected'") } }
You can try to use js,so that if you have many options,you don't need to check on each option:
<select id="facilities" class="form-control" style="width:200px;">
<option value="Funded">Funded</option>
<option value="Un-Funded">Un-Funded</option>
</select>
<script>
$(function () {
$("#facilities").val("#Facilities");
//Or you can use $("#facilities").val(#Html.Raw(Json.Encode(Facilities)));
})
</script>
With MVC 5 you can use this method #: to insert your selected:
<select id="facilities" class="form-control" style="width:200px;">
<option value="Funded" #{ if (Facilities == "Funded") { #: selected="selected"
}}>
Funded
</option>
<option value="Un-Funded" #{ if (Facilities == "Un-Funded") { #: selected="selected"
}}>
Un-Funded
</option>
</select>
for older version you can check this link :
setting-the-selected-option-in-mvc3
I have an HTML.DropDownList where I can set datavaluefield and datatextfield like the following,
<select>
<option value="Fruit">APPLE</option>
</select>
Even, I can able to set the ID to dropdown list using html attributes but Since I need to set the 'Id' to the option like following,
<select>
<option ID='1' value="Fruit">APPLE</option>
</select>
Can anyone share the idea on it...
You can use the id attribute to set the ID to the option tag and use this.value into the onchange callback with select element.
Below is the working example
document.getElementById("select1").onchange = function() {
if (this.value == 'Fruit') {
var optionID=document.getElementById('1');
alert(optionID.value);
}
if (this.value == 'Flower') {
var optionID=document.getElementById('2');
alert(optionID.value);
}
}
<select name="select01" id="select1" onchange="handleSelect()">
<option value="Fruit" id="1">Apple</option>
<option value="Flower" id="2">Rose</option>
</select>
Try this, It will alert your selected value
<select onchange="alert(this.value)">
<option id="1">APPLE</option>
<option id="2">Orange</option>
</select>
Is there an option to block 'remove option' (or hide remove button) from tags which are already selected and disabled.
Here is my code in jsfiddle.
https://jsfiddle.net/wphqwvLf/734/
<select id="test" multiple>
<option val="1" selected disabled>1111</option>
<option val="2">222</option>
<option val="3" >333</option>
<option val="4" disabled>444</option>
</select>
$(function () {
$('select')
.select2( {
tags: true
}
)
.on('change', function(){
//console.log( $(this).val() );
})
.on('select2:unselecting',function(){
console.log('removes' );
});
});
In that code, I need to remove 'remove button' in 1111 tag OR disable 1111 from removing.
I have a select box which contains the options and optgroup that are generated dynamically using php.Now when I select "ALL" all the other optgroup, options should be disabled and when I select any option other than "ALL" the "ALL" option should be disabled
<select name="select1" id ="select1" onchange="handleSelect()">
<option value ="-1">ALL</option>
<optgroup label="CARS">
<option value="ford">FORD</option>
<option value="Nissan">Nissan</option>
</optgroup>
</select>
<script>
function handleSelect() {
var selectVal = $("#select1:selected").text();
if (selectVal == "ALL") {
// cannot disable all the options in select box
$("#select1 option").attr("disabled", "disabled");
}
else {
$("#select1 option[value='-1']").attr('disabled', 'disabled');
$("#select1 option").attr('disabled', '');
}
}
</script>
How can I make this working?
This is kind of a strange thing to be doing but here's code that meets your requirements.
$('select').on('change', function() {
if (this.value == '-1') {
$('optgroup option').prop('disabled', true);
} else {
$('optgroup option').prop('disabled', false);
}
});
Live Example - http://jsfiddle.net/NpNFh/
You can use the following code.Let us consider you have three select boxes as follows
<select class="sel_box" id="sel_1" onchange="disable_sel(this.value);" ></select>
<select class="sel_box" id="sel_2" onchange="disable_sel(this.value);" ></select>
<select class="sel_box" id="sel_3" onchange="disable_sel(this.value);" ></select>
and in function let 'opt' is argument now use following
$('.sel_box option[value="'+opt+'"]').attr("disabled", true);
You can use two variations on the syntax for the disabled attribute, depending on the version of HTML you are targeting:
HTML4: <option value="spider" disabled>Spider</option>
XHTML: <option value="spider" disabled="disabled">Spider</option>