I am using material css for my web page design. I am having one single select country list dropdown and the values
<select id="select_id" name="select_id" required>
<option value="8">select1_1</option>
<option value="15">select2_2</option>
</select>
$(document).ready(function() {
$('select').formSelect();
});
My select option are populating from a database which has an underscore in its value. I want to update the select option value at runtime on the client side and remove the underscore from options.
<select id="select_id" name="select_id" required>
<option value="8">select1</option>
<option value="15">select2</option>
</select>
Is there is any better way to update it using jQuery. Thanks for the help
While changing at the source is the better solution, you can update the text of an option using the .text() overload that accepts a function:
$("select option").text((i, txt) => txt.replace(/_.*$/, ''))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_id" name="select_id" required>
<option value="8">select1_1</option>
<option value="15">select2_2</option>
</select>
remove the underscore from options
the above matches your sample that removes both the underscore and what follows it, to remove just the underscore:
$("select option").text((i, txt) => txt.replace(/_/g, ''))
You should keep the original value as "value" prop of the <option> tag. For the option text the best way to handle it is to create a parser parseOptionText(optionText: string): string, in this way you have full control over the logic of the parsing and the code is easy to maintain.
As final result you should have:
<option value={originalValueFromDB}>parseOptionText(originalValueFromDB)</option>
And
const parseOptionText = (optionText: string): string => {
return optionText.replace('_', '');
}
Related
When i'm first time entering multi select values i got the current entered text value based on below code in jquery
<select class="form-control select2" multiple="multiple" data-placeholder="Select areas" style="width: 100%;" id="edit_areas" name="area">
</select>
$(".select2-search__field").val()
$(document).on('keyup',".select2", function (e) {
var city = $("#add_city option:selected").text();
var location = $(".select2-search__field").val();});
which works fine.
But on edit when try to enter more values,current entering value is failed to get by using above code its showing empty
Note: Here i'm setting the dropdown dynamically based on user enters
Can anyone help me to resolve this issue.
You should use select2 specific methods to get and set the value, once you already converted to the select2.
When you are setting the value (e.g. for edit), use code like following :
$(".select2").select2("val", "Am,WY".split(","));
and to get the value, use code like following :
$(".select2").select2('val');
Hope it will resolve your issue (as not sure what is the HTML and code you are having, its just a guess :-))
Without seeing your HTML or complete jQuery it's hard to see exactly what you are trying to do. So I have made a stab in the dark.
$(document).ready(function() {
$('.mrselect').on('change', function() {
var values = $(this).find('option:selected');
var fancyPantsArray = [];
values.each(function() {
fancyPantsArray.push($(this).val());
});
console.log(fancyPantsArray);
});
});
<select class="mrselect" multiple="multiple" name="mrselect">
<option value="Mr Option 1">Mr Option 1</option>
<option value="Mr Option 2">Mr Option 2</option>
<option value="Mr Option 3">Mr Option 3</option>
<option value="Mr Option 4">Mr Option 4</option>
<option value="Mr Option 5">Mr Option 5</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
try this
var nome = $("#select_id").data('select').$dropdown.find("input").val();
or
$('input.select2-input').val();
I have several input type="select" with the same class. All with the same option values. I'm iterating through an array and checking if the option value is in it. If it is then I want all those relevant option values to be selected. I tried with this JQuery but it doesn't update the select dropdown with the selected values:
JS
$(".contacts option").each(function() {
var x = $(this);
if($.inArray(x.val(), selected_values)!= -1){
x.prop('selected', true);
}
});
HTML
<select class="form-control contacts" name="publicPermissions" id="publicPermissions" multiple="multiple">
<option value="share">Share</option>
<option value="private">Private</option>
<option value="user">User Config</option>
<option value="work">Work</option>
</select>
I have several of these selects how can I update them all so they all have the relevent option values selected?
You just need to use .val() method. No need to use loop.
$(".contacts").val(selected_values);
DEMO
After you put some values in selected_values array, it should work. Here is a fiddle
I have html code that looks like this:
<select id="invoice_line_items_attributes_0_product_id" class="select required form-control" name="invoice[line_items_attributes][0][product_id]">
<option value=""></option>
<option value="34" data-price="123.0">asdsad</option>
<option value="35" data-price="123213.0">asd</option>
</select>
<select id="invoice_line_items_attributes_1_product_id" class="select required form-control" name="invoice[line_items_attributes][0][product_id]">
<option value=""></option>
<option value="31" data-price="1223.0">asdsad</option>
<option value="32" data-price="12333213.0">asd</option>
</select>
And now I want to iterate through all this selects and when one of this change this value alert this date-price attribute. I trying to do this with the following code:
$('[id*="product"]').each ->
$(this).change ->
alert $(this).attr("data-price")
But It gaves me undefined instead of this data-price value.
Three things:
1) You do not need to iterate over select element individually and then bind the even. Selector will do that on its own for matched elements.
2) You need to find selected option and then get data price value.
3) use .data() instead of using .attr() to get data attribute values.
Use:
$('[id*="product"]').change(function(){
alert($(this).find('option:selected').data('price'));
});
Working Demo
That is because your select doesn't have data-attr, I think you want the selected options data-attr.
And to get data-attributes jquery provides .data function.
do like bellow.
$('[id*="product"]').change(function(){
alert($(this).find(':selected').data('price'));
});
DEMO
<select id="wbox" name="listbox" size="20"onchange="call(this)">
<optgroup label="Taxes">
<option value="1694" label="DNA-option1"></option>
<option value="1642">RNA-option2</option>
I have a list box that I would like to extract the label of the selected option, and use it in a JavaScript function.
function call(op) {
alert(op.label);
alert(op.name);
alert(op.value);
var x = op.label;
}
However this always returns as label, undefined. I've tried changing the way the option label is written in the html. This might not be the best way to write the java script function. I absolutely cannot use the option value, it is a unique id and used for something else. Any suggestions on what I am doing wrong or a better way to do this?
To get the selected <option>, you need to use the selectedOptions property. This is an array, because <select> tags can (optionally) support multiple selection. This array contains <option> tag objects, so you should be able to get your label using op.selectedOptions[0].textContent.
I guess:
<select id="wbox" name="listbox" size="20" onchange="call(this.selectedOptions)">
<optgroup label="Taxes">
<option value="1694" label="DNA-option1">RNA-option1</option>
<option value="1642" label="DNA-option2">RNA-option2</option>
</select>
<script type="text/javascript">
function call(op){
for(var i=0;i<op.length;i++){
console.log('Label: '+ op[i].getAttribute('label'));
}
}
</script>
is there any JavaScript / jquery library to turn an input into a select where the "other" option is a free text? Or do I have to write it by myself? Thanks
You may consider using jQuery UI Autocomplete. That way it will allow arbitrary text and will show a drop down that is filtered by user input (if it is relevant to your situation).
try the following-
javascript function as follows:
function changeselect()
{
var mdiv=document.getElementById('other');
var cdiv=document.getElementById('select');
if(cdiv.options[cdiv.selectedIndex].value=='other')
{
mdiv.style.visibility='visible';
}
else
{
mdiv.style.visibility='hidden';
}
}
HTML as follows:
.......
<select id="select" name="select" onChange="changeselect()">
<option value"please">Please select One</option>
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="other">Other</option>
</select>
<INPUT id="other" type="text" name="other">
...........
The dojo toolkit offers a full set of custom form widgets. The ComboBox would work in your case (see also the FilteringSelect)