The following multi-select control needs to be used to update a url hash containing a comma-separated list of ids.
<select id="options" multiple>
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
<option id="4">Option 4</option>
<option id="5">Option 5</option>
<option id="6">Option 6</option>
<option id="7">Option 7</option>
</select>
In the example below, Options 2, 3, and 4 are selected in the multi-select control. Selecting and un-selecting options in the multi-select control should update the url hash accordingly.
http://localhost/index#options=2,3,4
I have created a fiddle with the multi-select control but do not know how best to approach the url hash change. I have tried using an href to change the hash but that is not supported within an option tag, and does not provide the logic needed to update the hashes accordingly.
Fiddle
Please let me know if I provide any additional information.
Part of your issue is that in JSFiddle you won't be able to see the hash.
That said if you listen for changes on the <select> you can concatenate the array of values into a string using join() and then set this as a has using window.location.hash.
You could so something like this (based on #popnoodles code)
$( '#options' ).on( 'change', function() {
window.location.hash = $( this ).val().join( ',' );
});
Working demo
Ok without interfering with any of that plugin code
First you need to address your options
use this: <option value="1">Option 1</option>
not this: <option id="1">Option 1</option>
Then this jQuery will do what you want.
$('#options').on('change', function(){
var val=$(this).val();
if (val) hash=val.join(','); // join fails if .val() is null (nothing selected)
else hash='';
window.location.hash=hash;
});
Related
I have a tough time with Materialize CSS and Select compoment.
Code goes like this:
<select id="selectCompId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
When i visit the form i always get either value 1, 2 or 3 based on some DB query. Now, if i get 2 i want to set selected on option number 2 as initial selection. I'm having issues doing so.
Tried doing this:
document.getElementById('selectCompId').value = '2' but it seems like it doesn't work with this materialize component or i'm doing it wrong.
Whole code can be found here:
https://jsfiddle.net/536Lu1xe/1/
Expected result:
Initial value set to desired value (let's say 2 in this case).
Solution -> https://jsfiddle.net/536Lu1xe/2/
At the bottom, under script tags:
var elem = document.querySelector('#selectCompId');
var instances = M.FormSelect.init(elem);
document.querySelector('#selectCompId option[value="2"]').setAttribute('selected', 'selected');
M.FormSelect.init(elem);
If I understand correctly, you want to programmatically select an option in a select box.
In order to do that, we have to select all the options in a select box and select the desired option. The challenge here is to define the option that needs to be selected. In this case, I'm using the index for this.
Let's see how that looks like in code.
let n = 1; // the index of the option that needs to be selected. In this case, we want to select Item 2 (the option at index=1)
// the following line will select the <select/> on the page
const select = document.querySelector('select');
// now we have to loop through all options and select the one at Index=1
select.querySelectorAll('option')[n].selected = true;
<select>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
You need to add selected attribute to select:
<select>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
EDIT:
You'll also need to re-initialize Select after updating the value:
const elem = document.getElementById('select_id');
M.FormSelect.init(elem);
i'm loading a combo-box dynamically with jquery, after renderized, this combo have the follow structure
<select id="cboCliente" class="form-control">
<option value="0">Selecione...</option>
<option value="1">Cliente 0</option>
<option value="2">Cliente 1</option>
<option value="3">Cliente 2</option>
</select>
After some validation, i try to set one of this options as "selected", but don't work. This is my code:
$('#cboCliente option[value='+ m.getIdCliente() +']').prop('selected', true);
the method getIdCliente() is working fine, i receive the value "1".
The thing is, the jQuery can't set the selected option, and when a try for the Developer tools of chrome, everything works fine.
Am i doing something wrong?
Use
$("#cboCliente").val(m.getIdCliente());
Working demo: http://jsfiddle.net/GNzSL/
can we cache it first like this?
var selected = '#cboCliente option[value='+ m.getIdCliente() +']';
$(selected).prop('selected', true);
How to remove items (value="0") from select box?
Below is an example select box.
<select class="form-select" name="column" id="edit-column">
<option value="-1">Search All Columns</option>
<option value="0">option 1</option>
<option value="1">option 2</option>
</select>
my JavaScript is not working
$('#edit-column option[value="0"]').remove();
Your JavaScript is fine -- you're probably just running it before the DOM is fully loaded.
So, as PSL mentioned in the comments, you have to use something like this in jQuery:
$(function(){
$('#edit-column option[value="0"]').remove();
});
Which is really just shorthand for:
$(document).ready(function() {
$('#edit-column option[value="0"]').remove();
});
Here's the updated fiddle.
I've got a grid with dropdown in every row and I need to render it's state from DB.
So I've got dropdowns defined like that with selected option specified for preselecting the value from DB.
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don't move and stays where it was.
So when I then call $("#selectId").val() I get the old one value.
What's the appropriate way to initialize dropdown control and then have an ability to freely change it's value in browser or by jQuery?
This seems to be working fine (Firefox on Ubuntu):
HTML
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
JS
$('#selectId').change(function() {
var opt = $(this).find('option:selected');
console.log([opt.val(), opt.text()]);
});
var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');
If you select the options, you'll see that it will print the changed version. Working example:
http://jsfiddle.net/vm4Q8/
Hope this helps.
It should work fine. May be you are not setting it correctly.
You should pass the value of the option to val() method to select it.
E.g $('#selectId').val('1'); will set first option as selected and afterwards calling $('#selectId').val() will give you 1 and not 2.
Here is the working example http://jsfiddle.net/3eu85/
You can get the val of the option selected, instead of the select
$('select#selectId option:selected').val();
Docs: http://api.jquery.com/val/
Which browser are you trying this in? Your code looks fine to me, and appears to be working in this jsFiddle.
please use this code instead,
$('#selectId option:selected').val();
I would like to dynamically change the option value of a select tag. Is this possible? When I say value, I mean the "Change Me" portion. If this is possible, can someone please show me how?
<option value="0">Change Me</option>
You can fetch and modify the combobox item's text as follows:
$("#MyCombo option:selected").text()
Note: #shaz; thanks for your comment, my mistake!
Yes it is possible
You will need to look at the options available using a select tag.
<select id='selection'>
<option value='0'>Value 0</option>
<option value='1'>Value 1</option>
<option value='2'>Value 2</option>
<option value='3'>Value 3</option>
<option value='4'>Value 4</option>
<option value='5'>Value 5</option>
</select>
the javascript
var select = document.getElementById('selection');
// to get the currently selected item, use the `selectedIndex` property.
var index = select.selectedIndex; // 3 in case of value 2 selected
// to change its text
select.options[index].innerHTML = 'the new value';
is this what u are looking for?