We Keep Coding

Materialize Multiple Select - Show the number of items selected

Good Afternoon
I am using materialize multiple select for the user select multiples values, but instead of displaying each value in the input I want to show:
"Selected: 5"
In other words, I want to show the quantity of elements that the user selected, so this way the user will have a clean input, but I've tried many approaches and I didn't achieve this.
I was able to get the amount of items checked by the user, but when I've tried to set using the id of the select or the id of the div/input I didn't achieve this result, practically using the select id I can set the values but this one that I want makes the multiple select stay with the last value selected and using the id of the div doesn't change anything.
Below you will find the code that I've tried.
I hope that someone knows a way to tricky and achieve this.
FIDDLE: https://jsfiddle.net/dp90tgju/
<div id="myInput" class="input-field">
<select id="filterOptions" multiple>
<option value="" disabled>Choose your option</option>
<option value="1">Toys</option>
<option value="2">Comics</option>
<option value="3">Magazines</option>
<option value="4">Gym</option>
</select>
<label>Filter</label>
</div>
$("#filterOptions").on('change', function() {
console.log($(this).val());
if($(this).val().length !== null){
var numberOfElements = $(this).val().length;
console.log("Number:" + numberOfElements);
$(this).val("Selected");
}
$("#myInput").val('Selected: 2');
});
Thanks for the help

How to update select text with matched option value text

I would like to update the select text with the selected option text after page load.
Im redirecting on click of a option and after page load getting url from browser and checking which option has that value and wants to replace that matched option's text inside select text.
<div class="sorting-option">
<select id="selectdropdown" class="dropdown-select">
<option value="">Recommended Items</option>
<option value="?sort1desc=F&sort1=Item_NAME">Name (A-Z)</option>
<option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
<option value=".f?sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE">Price
(Low-High)
</option>
<option value=".f?sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE">Price
(High Low)
</option>
</select>
</div>
This is what i have tried
$(document).ready( function() {
$('#selectdropdown').bind('change', function () {
location.href = $(this).val();
});
var brwsr_url=document.URL;
var subSting = brwsr_url.substring(brwsr_url.indexOf('?')); //here im getting substring of url to match with option value
$('#selectdropdown').find('option[value="subSting"]').text(); // here im trying to replace the select text with option text which has that url substring
});

You're not concatenating properly. Also you're using getter of text. Instead, use the setter. Also from your comment, I suppose you need
$('#selectdropdown').val(subSting);

Try this mate>I think u are trying to select the option from the selectbox
$('#selectdropdown').find("option[value='"+subSting+"']").attr("selected","selected");

How to make a popup from unlisted option form [duplicate]

I want to make input option in select tag so user can choose between options or insert different value.
Is it possible?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
**<insert user value>**
</select>

HTML solution with "list" attribute:
<input type="text" name="city" list="citynames">
<datalist id="citynames">
<option value="Boston">
<option value="Cambridge">
</datalist>

You will have to use javascript to get the additional value. Check this post for some example code:
Jquery dynamically update "other" option in select

Select elements can't contain anything other than option or optgroup elements. Here's a ref to the spec http://www.w3.org/TR/html5/forms.html#the-select-element
You may be better off adding an option for "other" in your dropdown and then using JS to detect for that choice to dynamically show an input (below the dropdown) for a custom value.

Position an input box over the select box and remove the border of the input box. Make the length of the input box shorter than the select box so that the select box may still be used at its end.
Use the oninput event to detect input being entered in the input box. On each keystroke check for a continuing match in the select box. When a match no longer exists there is no further need for the select box.
The server will expect to receive both the text box input, if any, and the select box input, if any, and should use the select value if provided otherwise the input value if provided.

How to copy selection from one select to another?

I have two select elements, with same number of options, and same values for these options, but different (translated) texts.
How can I copy selection from one to another?
From user perspective, if someone will select "red" (value=1) and "brown" (value=5) in English select, I want "rubrum" (value=1) and "rufum" (value=5) to appear selected in Latin select.
For <input> tags, this works:
$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.val( $(this).val() );
Sadly, this omits <select> tags.
I found many ways to copy items, but can't find a way to copy actual selection.
Fiddle here: http://jsfiddle.net/e53aJ/8/
Edit: I'd love it to work both for single and multiselect, if possible. I know at first I did not reflect that in my fiddle, sorry.

I saw your html markup there you supplied all option values to 1 that should be in order like below:
Html:
<div class=".common-identifier">
<select name="english" class=".common-identifier">
<option value=1>red</option>
<option value=2>green</option>
<option value=3>yellow</option>
<option value=4>blue</option>
<option value=5>brown</option>
</select>
<select name="latin" class=".common-identifier">
<option value=1>rubeum</option>
<option value=2>viride</option>
<option value=3>flavus</option>
<option value=4>caeruleo</option>
<option value=5>brunneis</option>
</select>
</div>
jQuery:
$('select[name="english"]').on('change', function () {
$('select[name="latin"]').val(this.value);
});
Fiddle

<select> elements have a property selectedIndex that indicates which of their options is selected.
If you get the selectedIndex of the one <select>, then set the selectedIndex of the other <select> to that, you should get the result you're looking for.
However, if your <select> accepts multiple selections (as your question implies), then it's a bit more tiresome. You have to loop through the <option> elements and check each one to see whether it's selected property is true.
(This is why jQuery's popular: the JavaScript DOM interface frequently sucks.)

$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.attr('selectedIndex', $(this).attr('selectedIndex'));

jQuery getting text value for a select list

I have a list like this:
<select name="select_list_name" id="list_id">
<option value="">Select Option</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
...
...
</select>
I am trying to get the text value of the currently selected option in a select list. I looked at this thread: jQuery get specific option tag text
and tried this:
$("#list_id option:selected").text()
But this only gets me the first options text ("Select Option") regardless of which option has been selected.
I tried another way:
$("[name=select_list_name] option:selected").text()
That gets me the first option's text concatenated with the selected options's text ("Select OptionOption 2" if I select Option 2).
Any idea on why?

$('#list_id :selected').text(); should give you the selected option's text.
Something else in your code must be wrong -- this piece of code really works

This WORKS, 100%, do you have more than one id with 'list_id'?
$('#list_id :selected').text();