We Keep Coding

Select2 selects the first option automatically with tags = true

I have a select with some options and i want to avoid that the first option is the selected one, so i do the following and after that i initialize the select2:
<select class='form-control form-control-sm'>
<option value='100294'>Aguacate</option>
<option value='400172'>Bundle Editable</option>
<option value='100291'>Bundle no Editable</option>
<option value='100260'>Camara</option>
</select>
$('select').val([]);
$('select').select2({
tags:true
});
The problem is that, for some reason when i set the select2 tag options to true, after typing 2 characters, the first value is automatically selected and i don't know why
Fiddle: https://jsfiddle.net/wolfteam20/2pwkLq6j/1/
Any help would be appreciated
Edit: I think this one is a bug in select2
Issue

I know it's been a while, but there is a workaround for this.
Turns out that if you add an empty <option> to the select tag, and add a placeholder, the issue is fixed.
JSFiddle

Manipulating select option selected value in DOM several times without page load

I am in an unfortunate position where I need to be able to copy entire blocks of HTML without the page reloading using javascript/jquery, including inputs and selects.
I have most of it working, but I'm stumped on the selects. In order for it to "copy" properly so the copy displays the selected value of where its copying from, I need to explicitly set the attribute "selected" on the copy from select. The problem is, if I change the value on a select that I will copy from, the previous selections "selected" attribute remains, and I don't know how to get rid of it.
Here is a link to the fiddle and below is the basic test to show you what I mean: fiddle. You'll need to inspect element on the select list and show all of the option tags.
Make a selection
Hit the Enter button
Observe the selected attribute go on the option you chose
Choose a different option
Hit the enter button
Observe that now two options have the selected attribute. At this point I need to get rid of the selected attribute from the step 3 observation
HTML:
<table>
<tr>
<td>
<select>
<option value="">Select One</option>
<option value="test1">Test1</option>
<option value="test2">Test2</option>
<option value="test3">Test3</option>
<option value="test4">Test4</option>
</select>
</td>
</tr>
</table>
<button onclick="enterTest()">Enter</button>
Javascript
function enterTest(){
var $selectedOption = $("select").children(":selected");
$selectedOption.attr("selected","selected");
}

No need to deal with options and selected attribute.
If the values are unique,
var $select = $("select");
function enterTest(){
$select.clone().val($select.val()).appendTo('body');
}
Demo
Otherwise, use selectedIndex:
$select.clone().prop('selectedIndex', $select.prop('selectedIndex'))
Demo

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 refresh default display option in select by javascript or jquery?

html code:
<select>
<br>
<option>1</option><br>
<option>2</option><br>
</select>
This select will default display the first option item(display 1).
Now i want to change select to display the second item by jquery when dom is ready, but i tried several times, all failed.The following is my attempt:
$('select').prop('selectIndex', 1);
$('option').eq(1).attr('selected', 'selected');
$('option').eq(1).prop('selected', true);
default set select's style to 'display:none' in html code, then try above three ways and finally invoke $('select').show()
Maybe, i am only setting the dom value, not tell browser to refresh 'select'.
Do you konw the other way to refresh default display option in select?

You have to add values to your options from select.
<select>
<option value="1">First</option>
<option value="2">Second</option>
</select>
Then, just set the value "2".
$("select").val("2");
Or, you can do this simply setting the second value from select.
$("select").val(2);
See the working example here.

This is enough
$("select").val(2);

i think you want to select option 2 when page is load.
<select>
<option>1</option>
<option selected="selected">2</option>
</select>

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();