Materialize: How to get selected option from material_select

[uok]

Not a bug, but a question:
materialize creates a ul from simple select-element, how can you get the currently selected option?

<select id="myselect">
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
    <option value="5">E</option>
</select>

Thanks for this awesome framework!

[Dogfalo]

val() on the original select
On Mar 4, 2016 11:43 AM, "Ben S." [email protected] wrote:

Not a bug, but a question:
materialize creates a ul from simple select-element, how can you get the
currently selected option?

A
B
C
D
E

Thanks for this awesome framework!

—
Reply to this email directly or view it on GitHub
https://github.com/Dogfalo/materialize/issues/2877.

[uok]

Thanks!

[drlh]

I tried to set the selected value with $("#id").val("value") ,but it doesnt work out. Any suggestions?

[Thanood]

Try just .val() without any parameters.

[uwong15]

I using $('#selectId').parent(["0"]).children()[1].value

[DanielRuf]

That is a weird approach @uwong15.

[rockomatthews]

So where does .val() go? If you want to capture the selected values in the HTML, are you saying you would use .val() somewhere in the component.ts to obtain them?

[namnv04]

$('select#jsSeatSection').val()

I've used this and it works. Don't forget to select some value then try otherwise you see "null"

[rharasim]

@drlh I use simple function, it's not beautiful, but works

function msValue (selector, value) { selector.val(value); selector.closest('.select-wrapper').find('li').removeClass("active"); selector.closest('.select-wrapper').find('.select-dropdown').val(value).find('span:contains(' + value + ')').parent().addClass('selected active'); }

It works only with jquery, Usage:

msValue($("#select_id"), "value_here");

[DanielRuf]

That is not how it should be done in general.

[yagami271]

you should call $("#yourselect").val("2")after call$('select').material_select();ans you will see change

hope help :)

[ray007]

And it's sad that's it's necessary to create a new plugin instance just because the value was changed from the outside.

[mvanorder]

If you look at line 28 in /js/select.js, the new object being constructed gets assigned as an attribute of the element it's constructed from this.el.M_FormSelect = this;. After logging that attribute to the console and navigating the object you can see the value in M_FormSelect.input.value, This works for me:

someVar = document.getElementById('my-select').M_FormSelect.input.value;

Correction: The above gets the text from the selected item, not the value.

[ManojFORGE]

$("#myselect").change(function() {
console.log($('select#myselect').val());
});

You have to use like this its 100% working..

[douira]

It would be super nice if this reference to .val() were added to the Select doc page as it only has getSelectedValues on the doc page which seems to return the last selected value and not the current one!

[JaneCoder]

I don't see a way to set a default value, for when this is used in an edit form of an existing item. Do I have to manipulate the JavaScript to set a default value or is there an attribute to set the default? Thanks for any information.