Develop Reference

get selector value after selection?

I'm curious as to if it is possible to get this selector value after the user selects a value?
<select>
<option>test1</option>
<option>test2</option>
</select>
//Idea of what i'm trying to accomplish
select.addEventListener('select',()=>{
console.log(select.value);
})
I'm trying to use this value data to determine which item to load and view before you submit the form.

First of all, you have to locate your select element in the script. To do this, you need to provide it with a specific id.
<select id="test_selector">
<option>test1</option>
<option>test2</option>
</select>
Then you can use this id to access that selector in the JS. In order to get the updated value, chain it with the change event listener. Its callback receives the event parameter which contains the info you need.
document.getElementById('test_selector').addEventListener('change', event => {
console.log(event.target.value);
});

Another option is to do it on jquery if you feel more comfy with it
Give your select an id
<select id="id_selector">
<option>test1</option>
<option>test2</option>
</select>
Use a jquery .change function to get the value of the selected option
$('#id_selector').change(function(){
console.log($('#id_selector').val());
//or console.log($(this).val()); to make the code shorter
});

Try this
select.addEventListener('select',(e)=>{
console.log(e.target.value);
})

Set the first option select2

I want to set the first position to select2 dropdown by default, I have tried this but It doens´t work:
$('#mylist').val($('#mylist option:first-child').val()).trigger('change');
Other way that I tried;
$('#mylist').val(1);
But the problem is I don´t know what value is, because it is depend from a query and It will not always be the same value.
I did not set the dropdown values ​​from the HTML, but it is an input hidden and the values ​​are loaded in a query
I hope that anyone can help me
Regards!

If you using Select2 4.x just trigger change.select2
$('#mylist').val(1).trigger('change.select2');

please try with this:
$('#yourSelect2').val($('#yourSelect2 option:eq(1)').val()).trigger('change');
the value from eq() depends of the position that you want to select

This works for me:
$('#mylist option:eq(0)').prop('selected',true);

Please do this
$('select#mylist').val(1).select2();

It's better to use attribute specifiers and set that element's selected prop to true like so:
$('option[value="op2"]').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
<option value="op4">Option 4</option>
</select>
Then change op2 to whatever the value attribute of the desired default option is.

this work for me :
$("#mylist").val($("#mylist option:first").val()).trigger('change');
juste remove -child

As you may know Select2 need data in particular format only [id="id_value",text="data_linked_to_id"]
Lets consider you want to select first item ,you should have its Id which is used by select2 to list all items.(let here first id be 1)
$('#selectElementId').val("1");
$('#selectElementId').trigger('change');
If want to set multiple items selected then pass array of ids.
ids=["1","3","4"]
$("#selectElementId").val(ids);
$("#selectElementId").trigger('change');
**OR**
$("#selectElementId").val(["1","3","4"]);
$("#selectElementId").trigger('change');

Step 1:
Select first option of your select(s) - works not only for select2
$('#myForm').find('select').find('option:eq(0)').attr('selected','selected');
Step 2:
Trigger select2 change
$('#myForm select').trigger('change.select2');

How to get the selected value of some random dropdown in Javascript/jQuery

<select ng-model="myModel" id="searchAsset" class="search">
<option ng-repeat="asset in assettype" ng-click="assetclick()" value="{{asset}}"></option>
</select>
<select class="search" id="searchLevel">
<option class="chooseLevel" ng-repeat="level in levellist" value="{{level}}"></option>
</select>
While performing some logic on second dropdown, I want to fetch the selected value of the first dropdown or vice-versa. How can I do this?
I tried using $("#searchLevel").value and $("#searchLevel option:selected").text()

The direct answer to this question is to use the .val() method for jQuery like so:
var selectedVal = $("#searchLevel").val();
However, the slightly less direct, but true answer is that you should not be doing anything like this in an angular app - changes in the dom should only be affecting your view model.

When your using angular, jquery is really not required.
As per your code, The first select menu value will be stored in the ng-model attribute value i.e. myModel.
In your second select menu, specific the ng-model as well. You can just fetch the value of the drop down menu by calling ng-model name.
<select class="search" id="searchLevel" ng-model="secondSelect">
<option class="chooseLevel" ng-repeat="level in levellist" value="{{level}}"></option>
</select>
For example,
If you want to access the value inside your controller on change event, then
$scope.changeEventhandlerForFirstSelect = function() {
// $scope.myModel will contain the value
}
Similarly, for second select menu $scope.secondSelect will give that value.

try
$("#searchLevel").val();
with: $("#searchLevel option:selected").text() you get the text not the value.

Dropdown list is not remain selected after refreshing the window

I have a drop-down list like bellow:
<select class="span2" id ="sort" name= "order_by">
<option >Default</option>
<option >Price</option>
<option >Color</option>
</select>
and i have on change event handler for this :
$('select#sort').change(
function(){
$(this).closest('form').trigger('submit');
});
when i select the price from the dropdown list the price should remain selected but its not happening after refreshing the window.I am using ruby on rails .
I have no idea whats happening here.
Is there any one who can guide me?
thanks

You can use the following(Javascript/jQuery Solution) :
$(document).ready(function(){
var selected_val = localStorage.getItem("sort");
$("#sort").val(selected_val);//This would set the value from local-storage as selected value
$("#sort").change(function(){
var selected = $("#sort").val();
localStorage.setItem("sort", selected);//Setting the selected value in localstorage
$(this).closest('form').trigger('submit');
});
});
Please note that : If you are populating via database then while rendering the page template, you should be adding selected attribute then or just add that particular value as the localstorage value.
Hope you get the idea.

You have to store the value on the server side anywhere, so when the page gets re-rendered the value gets selected automatically according to the selected value

Use Rails select_tag helper instead of javascript
<%= select_tag(:order_by, options_for_select([['Default', 'Default'], ['Price', 'Price'], ['Color', 'Color']], selected: params[:order_by] )) %>

How to select an <option> within a dropdown by value and assign the "selected" attribute to it?

For a dropdown list (<select>), at some point I need to find the option with a given value and assign the selected attribute to it.
e.g.:
<select id="font-size">
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
</select>
In the example above, how would I add the "selected='selected'" attribute to the option with the value 14?

This would do it:
$('#font-size').val(14);
NB: this sets the selected property on the required <option> element - the attribute represents the initital value of the dropdown when the page is first loaded.

If you need this to set the initial value when the page is loaded then use,
$(document).ready(function() {
$('#font-size').val(14);
});
or else if you want it the value of which user has selected after the loading use this,
$(document).ready(function() {
$('#font-size').change(function() {
alert($(this).val());
});
});

document.getElementById("font-size").value = "14";