Cannot set multiple value of bootstrap select from array - javascript

So I have this string: 93, 94 which are the references of the values of a select.
I'm trying to set these values using:
let values = "93, 94";
$('#property-categories').selectpicker('val', values);
but not working, none of the value is selected in the select control.
If I write: $('#property-categories').selectpicker('val', [93,94]);
works, any idea?

To turn a comma delimited string in to an array, which is the type required here, use split().
let values = "93, 94";
$('#property-categories').selectpicker('val', values.split(', '));

Please check this one for simple select control
var values="93,94";
$.each(values.split(","), function(i,e){
$("#strings option[value='" + e + "']").prop("selected", true);
});
For selectpicker you need to set below code
$('.selectpicker').selectpicker();
$('.selectpicker').selectpicker('val', ['93','94']);
Check here working demo - > Click here

Related

how force set selected

i'm try set selected with javascript and jquery but dont set the value, my code:
<select class="form-control" id="destino" name="destino" required>
</select>
this is my select for append the options i use a cycle for:
for(i=0; i<subdirectorios.length; i++){
temporal_value =path_directorioPrincipal.concat(subdirectorios[i]);
var option = $("<option value="+temporal_value+">"+ subdirectorios[i] +"</option>");
//append option
$("#modalProceso #destino").append(option);
}
the output:
i don't understand why set value as :
value="media/gestionDocumental/Operativos/Prueba" produccion=""
in the console return this value:
media/gestionDocumental/Operativos/Troquelado
media/gestionDocumental/Operativos/Prueba Produccion
for set selected use:
$('#destino option:contains("' + destino_path + '")').attr("selected", true)
//or this:
$('#destino').val(destino_path);
but dont set selected.
please any suggest..thanks..!!
Firstly - You need to wrap your options value in quotes otherwise when space occurs it'll be parsed as a separate property.
$("<option value='"+ temporal_value +"'>"+ subdirectorios[i] +"</option>");
As for your second issue you actually should call .change() after setting the option value, like below:
$("#destino").val(destino_path).change();
Sample JSFiddle

Prefix input value

I am creating a form and dynamically populating a field using php so the field value looks like this 01-02-2015-01. I need to prefix the value with a number depending on the value of a select box. So if ( condition ) the prefix will look be 888 so the input value is now 888-01-02-2015-01. I need to do this dynamically so javascript/jQuery is what I need to use. Any help out be appreciated.
Untested code, but probably should work
Html :
<select id='currency'>
<option val='$'>$</option>
<option val='Rs.'>Rs.</option>
</select>
Amount : <input type='text' value='1200' id='amount'/>
Jquery :
$(function(){
$("#currency").change(function(){
var symbol = $(this).val();
var currentValue = $('#amount').val();
$.each(['$','Rs.'],function(i, a){
if(currentValue.indexOf(a)==0){ //if the currentValue starts with any matching symbol, then remove it.
currentValue = currentValue.replace(a,'');
}
});
$("#amount").val(symbol + ' ' + currentValue);
});
//In order to fire change manually, do this
$("#currency").change();
});

datalist get selected value and custom attribute (without events)

I have a datalist with options and a custom attribute.
<input list="selectedItems" class="selectedItemsList"></input>
<datalist id="selectedItems">
<option value="test11" oldvalue="f1"></option>
<option value="test12" oldvalue="f2"></option>
</datalist>
It is displayed on a popup. When a popup closes the value and custom attribute value must be used in a function...
I tried:
alert($("#selectedItems option:selected").val());
alert($("#selectedItems option:selected").attr("oldvalue"));
$('.selectedItemsList option').each(function() {
if($(this).is(':selected')){
alert($(this).val());
}
});
for (var i=0; i<document.getElementById('selectedItemsList').options.length; i++)
{
if (document.getElementById('selectedItemsList').options[i].value == document.getElementsByName("selectedItems")[0].value)
{
alert(document.getElementById('selectedItemsList').options[i].value);
break;
}
}
Nothing works.
I can get the values using on-event but that is not an option for me.
$('.selectedItemsList').on('input', function() { ...
alert($(this).val());
$(function(){$("input[name=selectedItems]").on('input', function(){// selects which array raw is edited
for (var i=0; i<dList.length; i++) if(dList[i].ItemName===$(this).val()) { num = i;
$(".selectedItems option[value="+dList[num].ItemName+"]").val($(this).val());
dList[num].ItemName=$(this).val();
});
});
So, I use datalist oninput event to get the selected value. Then, I edit a raw of an array of values that represents the datalist values.
var dList=[];num=0;
dList.push({ItemName: $(this).attr('value'), ViV: vs[0], NU: vs[1], ItemKey: $(this).attr('key')});
Essentially, I believe the problem is related to your selector use. I'm making the assumption that you're trying to get the old value from the datalist. On closing your popup, you should get the value of the input first
var inputval= $(".selectedItemsList").val();
alert(inputval);
then grab the associated oldvalue based on the value of the input.
var oldval= $('datalist#selectedDevices option[value='+inputval+']').attr('oldvalue');
if (oldval)
alert(oldval);
I created a jsfiddle for you here to play around with.
http://jsfiddle.net/jornjjt6/

Loop through string of dropdown options and select

I want to select an option in a string, where the string will be the contents of a dropdown, but I dont know how to loop through the string as an object please.
In the example I would like "Saab" to be selected and the string alerted.
var x = '<select><option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select>';
$.each($(x), function(index, value) {
if ($(this).val() == "Saab"){
$(this).attr("selected","selected")
}
});
alert(x);
Start by turning the string into a jQuery object:
var x = $(x);
Then just select the correct option and set it as selected:
$('option:contains("Saab")', x).prop('selected', true);
FIDDLE
$.each($('option', x), function(index, value) {
if ($(this).text() == "Saab"){
$(this).attr("selected","selected")
}
});
Is this in an HTML page? If yes, why not just use something like $("option").each()?
Don't need to loop, jquery can do that for ya
$(x).children('option:contains("Saab")').attr('selected','selected');
ref: http://api.jquery.com/category/selectors/

Keeping key value pairs together in HTML <select/> with jQuery?

Given a select with multiple option's in jQuery.
$select = $("<select></select>");
$select.append("<option>Jason</option>") //Key = 1
.append("<option>John</option>") //Key = 32
.append("<option>Paul</option>") //Key = 423
How should the key be stored and retrieved?
The ID may be an OK place but would not be guaranteed unique if I had multiple select's sharing values (and other scenarios).
Thanks
and in the spirit of TMTOWTDI.
$option = $("<option></option>");
$select = $("<select></select>");
$select.addOption = function(value,text){
$(this).append($("<option/>").val(value).text(text));
};
$select.append($option.val(1).text("Jason").clone())
.append("<option value=32>John</option>")
.append($("<option/>").val(423).text("Paul"))
.addOption("321","Lenny");
Like lucas said the value attribute is what you need. Using your code it would look something like this ( I added an id attribute to the select to make it fit ):
$select = $('<select id="mySelect"></select>');
$select.append('<option value="1">Jason</option>') //Key = 1
.append('<option value="32">John</option>') //Key = 32
.append('<option value="423">Paul</option>') //Key = 423
jQuery lets you get the value using the val() method. Using it on the select tag you get the current selected option's value.
$( '#mySelect' ).val(); //Gets the value for the current selected option
$( '#mySelect > option' ).each( function( index, option ) {
option.val(); //The value for each individual option
} );
Just in case, the .each method loops throught every element the query matched.
The HTML <option> tag has an attribute called "value", where you can store your key.
e.g.:
<option value=1>Jason</option>
I don't know how this will play with jQuery (I don't use it), but I hope this is helpful nonetheless.
If you are using HTML5, you can use a custom data attribute. It would look like this:
$select = $("<select></select>");
$select.append("<option data-key=\"1\">Jason</option>") //Key = 1
.append("<option data-key=\"32\">John</option>") //Key = 32
.append("<option data-key=\"423\">Paul</option>") //Key = 423
Then to get the selected key you could do:
var key = $('select option:selected').attr('data-key');
Or if you are using XHTML, then you can create a custom namespace.
Since you say the keys can repeat, using the value attribute is probably not an option since then you wouldn't be able to tell which of the different options with the same value was selected on the form post.

Categories