I am having trouble Enabling Check boxes in Select box with multiple attribute. the values are in an array.
var values = ["op1","op2","op3","op4"];
I want to enable all check boxes which are in array. i cant figure out how to pass values to select. the box is working fine when i give only one value
$("#select_box").val(values[0]);
here is the fiddle
https://jsfiddle.net/dmtv02j8/3/
Aparantly you have to call .material_select2('refresh'). This is how you can achieve what you want:
$(document).ready(function() {
var values = ['op1', 'op2'];
var selectEl = $('select');
selectEl.material_select();
selectEl.val(values);
selectEl.material_select('refresh');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<div class="input-field col s12">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
Just pass data instead data[0] and it works
$('#list').material_select(); // initial initialization
// data from database via ajax
var data = ["op1","op2"];
$('#list').val(data);
$('#list').material_select(); // re initalization on data change
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<div class="input-field col s12">
<select multiple name="list[]" id="list">
<option value="" disabled selected>Choose your option</option>
<option value="op1">op1</option>
<option value="op2">op2</option>
<option value="op3">op3</option>
<option value="op4">op4</option>
<option value="op5">op5</option>
</select>
<label style="color:#009688">List Of Category</label>
</div>
Related
I'm trying to add a custom attribute to select 2 options, Even if I search with "data-name" the option should show up
<select name="countries" class="vat" id="example">
<option value="USA" data-name="Newyork" selected="selected">United States</option>
<option value="UK" data-name="london">Unied Kingdom</option>
<option value="DE" data-name="Berlin">Germany</option>
</select>
I'm trying to approach in the search, if I type berlin, Germany should show up on the select list
<script type="text/javascript">
$(document).ready(function() {
$("#example").select2().find(":selected").data("name");
});
</script>
Please try to help me on this
Thanks
You can use matcher method of select2 plugin . So ,whenever user typed inside input-box you can filter options inside select-box using ..indexOf(input_value). If the value is true then option will be shown else it will get hidden.
Demo Code :
$(function() {
$("select").select2({
"width": "150px",
matcher: function(term, text, option) {
//get input box value
var input_value = $(".select2-input").val().toLowerCase();
//get the data attribute value..
var data_name = $(option[0]).data("name").toLowerCase();
//if match ..show that option
return data_name.indexOf(input_value) != -1 || option[0].textContent.toLowerCase().indexOf(input_value) != -1;
}
})
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<select name="countries" class="vat" id="example">
<option value="USA" data-name="Newyork" selected="selected">United States</option>
<option value="UK" data-name="london">Unied Kingdom</option>
<option value="DE" data-name="Berlin">Germany</option>
</select>
try this, you can search the state and country will show
<input list="brow">
<datalist id="brow">
<option value="USA" data-name="Newyork" selected="selected">new york, florida</option>
<option value="UK" data-name="london">london</option>
<option value="DE" data-name="Berlin">berlin, other states</option>
</datalist>
having some issues while updating data, I have two dropdown list and using bootstrap select picker I need to update second dropdown list based on first one but failed.pls kindly help
Posting the fiddle link
fiddlelink
$('.selectpicker').on('changed.bs.select', function (e) {
if($(this).attr('name')=="name2"){
$(".selectpicker[name='name1']").val();
}
else{
$(".selectpicker[name='name2']").val();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="id1" name="name1" class="selectpicker" data-style="form-
control" data-live-search="true" title="Select Fruits"
multiple="multiple">
<option value="Fruit">Fruits</option>
<option value="Animal">Animal</option>
</select>
<select id="id2" name="name2" class="selectpicker" data-style="form-control" data-live-search="true" title="Select Product"
multiple="multiple">
<option value="Fruit">Mangoes</option>
<option value="Fruit">Apple</option>
<option value="Animal">Dog</option>
<option value="Animal">Cat </option>
</select>
You can use change event on your select-box . Inside this get value of selected option using $(this).val() this will return you array so use for-loop to iterate through value and show options where value matches in second dropdown . Lastly refresh your selectpicker to update changes .
Demo Code :
$('#id1').on('change', function(e) {
var values = $(this).val()
$("#id2 option").hide() //hide all options
$('#id2').selectpicker('deselectAll') //if want to remove all selcted optn
if (values.length > 0) {
for (var i = 0; i < values.length; i++) {
//show where value is same..
$("#id2 option[value=" + values[i] + "]").show()
}
} else {
$("#id2 option").show() //show all options
}
$('#id2').selectpicker('refresh'); //refresh selctpicker
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/js/bootstrap-select.min.js"></script>
<select id="id1" name="name1" class="selectpicker" data-style="form-control" data-live-search="true" title="Select Fruits" multiple="multiple">
<option value="Fruit">Fruits</option>
<option value="Animal">Animal</option>
</select>
<select id="id2" name="name2" class="selectpicker" data-style="form-control" data-live-search="true" title="Select Product" multiple="multiple">
<option value="Fruit">Mangoes</option>
<option value="Fruit">Apple</option>
<option value="Animal">Dog</option>
<option value="Animal">Cat </option>
</select>
<select class="form-control" id="prodname" name="pname" >
<option value="0" disabled="disabled" selected="selected">-- Select Product --</option>
#{
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id">#product.Product_Name</option>
<option hidden>#product.Quantity</option>
}
}
</select>
I want to select this option.
<option hidden>#product.Quantity</option>
I have tried this selector but could not get text.
var productunitprice = $("#prodname option").find("hidden").text();
You can use var text = $("option:selected",this).next().text() Example below.
$("#prodname").change(function() {
var text = $("option:selected",this).next().text()
console.log(text)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="prodname">
<option value="1">1</option>
<option hidden>1.1</option>
<option value="2">2</option>
<option hidden>2.2</option>
</select>
As an alternative to adding many unused and hidden options.
You can add the unit price to the relevant option directly using a data attribute for example data-unit-price.
foreach(var product in (List<tbleProdcutDetail>)ViewBag.productlist)
{
<option value="#product.Id" data-unit-price="#product.Quantity">#product.Product_Name</option>
}
Then simply read it from the selected option. In my humble opinion it is cleaner and doesn't use additional hidden option elements as storage for data belonging to other options.
$(document).ready(function() {
$("#prodname").change(function() {
var productunitprice = $("option:selected", this).data('unitPrice')
console.log(productunitprice)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="prodname" name="pname">
<option value="1" data-unit-price="5.25">product 45</option>
<option value="2" data-unit-price="12.99">product 94</option>
</select>
In this case, only primary dropdown will change, other dropdowns' values will change automatically according to it (so users wont be changing them) I'm trying to get the Option's TEXT value using PHP with $_POST. But i can only get it when i manually changed the other dropdown .
I have tried to use the trigger() method, but it fails to get the option text value. Any idea why the code fails to work. Thank you.
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
}
<!-- try to get the option text value and pass it to input field-->
<!-- Then in the php code use $_POST[] to retrieve the input value-->
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.options[ddl.selectedIndex].text;
}
$("select").trigger("change");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" type="hidden" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>
PHP Code
$value =$_POST['make_text'];
Html element <select> onchange doesn't fire for programmatic changes, you need to fire it yourself with
$(".secondary").trigger("change");
or by Id
$("#Qualifications").trigger("change");
The problem is that your hidden <input> never had the value. if you remove the hidden it on your code you can check it.
So when you POSTED the values the value on make_text was empty string. So if you fire the trigger after the for loop then it will work.
function setDropDown() {
var index_name = document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.querySelectorAll('.secondary');
for (var i = 0; i < others.length; i++) {
others[i].selectedIndex = index_name;
}
$("#Qualifications").trigger("change");
}
function setTextField(ddl) {
document.getElementById('make_text').value = ddl.value;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
<div><b>Primary dropdown:</b>
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</div>
<div>
<b>Other dropdown 1</b>:
<select class='secondary' id="Qualifications" name="Qualifications" onChange="setTextField(this)">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select></div>
<input id="make_text" name="make_text" value="" />
<div> <b>Other dropdown 2</b>:
<select class='secondary' id="Qualifications2" name="Qualifications2">
<option value="select">select</option>
<option value="treatmentid1">treatmentname1</option>
<option value="treatmentid2">treatmentname2</option>
</select>
</form>
I have to say that I don't see any need to use a hidden input text to POST data to PHP because you can just post the value of the <select> and retrieve it in PHP like this $force = $_POST["ForceSelection"];.
Otherwise, if you want to continue what you started, you can change your setDropDown() function to this :
function setDropDown() {
#Get the selected value of the ForceSelection select :
var index_name = $('#ForceSelection').val();
#Change the value of the other secondary select :
$(".secondary").each(function( index ) {
$(this).val(index_name).change();//This will change the value and trigger the change event.
});
}
<div class="form-group">
<label for="options">foo</label>
<select class="form-control" name="options" multiple>
<option value="">-- Choice --</option>
<option value="opt1">test1</option>
<option value="opt2">test2</option>
<option value="opt3">test3</option>
</select>
</div>
<script type="text/javascript">
$("#scope_new_system").change(function() {
var allSelected = new Array();
$("#scope_new_system option:selected").each(function() {
allSelected.push(this.value);
});
});
</script>
I'm trying to dynamically generate a select with different options based on options selected on the multiple select named "options" above. For example if I click on option test 1 then a select element with options shows to select an option. If I select test 2 then another select shows because I now have 2 options selected. Finally if I unclicked test 1 select option goes away and if i do the same with test 2 it also goes away as well and i'm left with nothing selected. Please help!.
Is this what you need?
$('#selectpicker').multiselect();
$('#selectpicker').on('change',function() {
var val = $(this).val();
$('.hidden_slc').hide();
for (x in val) {
$('#based'+val[x]).show();
}
})
<style>
.hidden_slc {
display: none;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" rel="stylesheet"/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<select id="selectpicker" multiple>
<option value='1'>tes1</option>
<option value='2'>tes2</option>
<option value='3'>tes3</option>
</select>
<select id="based1" class='hidden_slc'>
<option>sample_from_1</option>
<option>sample</option>
</select>
<select id="based2" class='hidden_slc'>
<option>sample_from_2</option>
<option>sample</option>
</select>
<select id="based3" class='hidden_slc'>
<option>sample_from_3</option>
<option>sample</option>
</select>
You can use this.
var allSelected = [];
$("#scope_new_system").on("change",function() {
var allSelected = new Array();
$("#scope_new_system option:selected").each(function(){
allSelected.push(this.value);
});
console.log(allSelected)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="form-group">
<label for="options">foo</label>
<select id="scope_new_system" class="form-control" name="options" multiple>
<option value="">-- Choice --</option>
<option value="opt1">test1</option>
<option value="opt2">test2</option>
<option value="opt3">test3</option>
</select>
</div>
As I pointed So the relation between the two selects just to show/hide it?? or select 2 values depending on select 1 values?? I didn't got that point
But sure Your 1st step is: To check for option:selected length by using $("option:selected" , this).length; or $(this).find("option:selected").length;
$("#scope_new_system").change(function() {
var allSelected = [],
num_of_selected_option = $("option:selected" , this).length;
if(num_of_selected_option == 0){
// if nothing selected
alert('Nothing Selected');
}else if(num_of_selected_option == 1){
// if just one selected
allSelected = [this.value];
alert('Just one value selected : '+allSelected);
}else if(num_of_selected_option > 1){
// if more than one selected
$("option:selected" , this).each(function(){
allSelected.push(this.value);
});
alert('Selected Values : '+allSelected);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="options">foo</label>
<select id="scope_new_system" class="form-control" name="options" multiple>
<option value="">-- Choice --</option>
<option value="opt1">test1</option>
<option value="opt2">test2</option>
<option value="opt3">test3</option>
</select>
</div>