We Keep Coding

Static text in a select

I want my select to always show the same text, but "keep" the selected option value.
So e.g. my select always shows text "Language", but when I get the value of it in JS, it will return the value of selected option.
How do I achieve this? If there's no possibility for pure HTML + CSS, vanilla JS will do.
Edit: I want this because when i choose a value, I have a list of input boxes which get filled by this. They are then changeable; this select is only used to set the "base" of these inputs. I want this select to always show the same
text because I don't want to end up in a situation where select shows different text than actually the text in inputs that will be used.
Answer:
<select id="mySelect">
<option value="" hidden>Language</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
document.getElementById('mySelect').addEventListener('change', showSameValue)
function showSameValue() {
let select = document.getElementById('mySelect')
let firstOption = select.querySelector('option')
firstOption.value = select.value
select.selectedIndex = 0
}

Using the change event, you can capture the selected value then simply set the first option as selected and set its value to the selected value.
select = document.querySelector("select");
first = select.querySelector("option");
select.addEventListener("change",function(el){
first.value = el.target.value;
el.target.querySelector("option").setAttribute("selected",false)
el.target.selectedIndex = 0;
console.log(first.value);
});
<select>
<option value="">Language</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

This is a weird behavior but it can be done by
adding a hidden input element next to select
add the event listener to select (onchange) that would change the value of the hidden element and reset select to desired value 'Languages'
The key would be to have proper fields names, so when submitting the form select could be omitted and hidden would prevail.

You can store the selected value in a variable to meet your requirement and then use it wherever you need.
<select name="select" onchange="func(this.value);">
<option value="value1">Display always</option>
<option value="value2">Random Value</option>
</select>
And here's the Js function
var selected = "";
function func(selectedValue) {
document.getElementById( "select").selectedIndex = "0";
selected = selectedValue; // Use this after final selection
}

There are a few ways to achieve this, but using just a <select> would not be possible, I would not advise this on an accessibility UX principal.
One option would be to use a <span> or <div> that when clicked shows the options.

jQuery removing set select option selected not removing

I am trying to remove the default selected option in the HTML and set the first as selected, my jQuery seems to be setting the first option as selected fine but it's not appearing selected as it's not removing the original selected option. I have tried 2 methods which are below:
option 1
$('.ty-profile-field__select-state :selected').prop('selected', false);
// mark the first option as selected
$(".ty-profile-field__select-state option:first").attr('selected','selected');
option 2
$('.ty-profile-field__select-state option').each(
function() {
$(this).removeAttr('selected');
}
);
// mark the first option as selected
$(".ty-profile-field__select-state option:first").attr('selected','selected');
option 3
$('.ty-profile-field__select-state').find('option:selected').removeAttr("selected");
// mark the first option as selected
$(".ty-profile-field__select-state option:first").attr('selected','selected');
HTML from source
<select x-autocompletetype="state" id="elm_24" class="ty-profile-field__select-state cm-state cm-location-billing" name="user_data[b_state]">
<option value="" selected="selected">- Select state -</option>
<option value="ACT">Australian Capital Territory</option>
<option value="NSW">New South Wales</option>
<option value="NT">Northern Territory</option>
<option value="QLD">Queensland</option>
<option value="SA">South Australia</option>
<option value="TAS">Tasmania</option>
<option value="VIC" selected="">Victoria</option>
<option value="WA">Western Australia</option>
</select>
You can see it's taking the first option and making selected for not removing the one that is initially set so it's not changing to the first.

Not sure, but you said you want to remove the default, leaving the next item as the selected item. This does that: https://jsfiddle.net/Twisty/um7xhx7m/1/
$(document).ready(function() {
$('.ty-profile-field__select-state option:selected').remove();
});
Now if anything else is :selected when this page loads, it would be removed. So you could adjust to selecting just option[0] like so:
$(document).ready(function() {
$('.ty-profile-field__select-state option:eq(0)').remove();
});

you can try something like:
$(#elm_24).removeAttr('selected');

$('.ty-profile-field__select-state').val('');
$('.ty-profile-field__select-state option:first').prop('selected', true);
$('.ty-profile-field__select-state option').each(function() { $(this).prop('selected', false); });
$(".ty-profile-field__select-state option:first").prop('selected', true);
$('.ty-profile-field__select-state').find('option:selected').prop('selected', false);
enter code here

Turned out what methods i was doing was fine but i needed to wrap in
$(window).load(function(){
As seems the option was being set after i was trying to set it

You can do it in this way.
$(document).ready(function(){
$(".ty-profile-field__select-state option").removeAttr('selected');
$(".ty-profile-field__select-state option:nth-child(2)").attr('selected',true);//Australian Capital Territory
$(".ty-profile-field__select-state option:first").attr('selected',true);//Select state
})
Here is the plunker
When you say option:first, it is first child that is Select state

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

DDSlick 'selected' attribute ignored on <select> element

I am using the following jQuery plugin:
http://designwithpc.com/Plugins/ddSlick
To show selectable images in a dropdown select box. It is working great apart from when I try to load the html with an option already selected, this option is not selected in DDSlick (so it just shows the first option as selected).
How can I transform:
<select class="homepage_icon" name="section_thumbnail[]" id="section_thumbnail4"><option data-imagesrc="../assets/images/homepage_icons/kidjockey-thumb.jpg" value="kidjockey-thumb.jpg"></option>
<option data-imagesrc="../images/homepage_icons/horse.png" value="horse.png"></option>
<option data-imagesrc="../images/homepage_icons/rosette.jpg" value="rosette.jpg"></option>
<option data-imagesrc="../images/homepage_icons/girl.png" value="girl.png"></option>
<option data-imagesrc="../images/homepage_icons/balloon.jpg" value="balloon.jpg" selected="selected"></option>
<option data-imagesrc="../images/homepage_icons/cake.jpg" value="cake.jpg"></option>
</select>
To actually show the selected option in DDSlick?
My plugin initialization is just the simple:
if ($('.homepage_icon').length) $('.homepage_icon').ddslick();
I assumed a selected option would automatically show in DDSlick but perhaps I'm missing something?

You can use the following to instantiate your drop downs:
$('.homepage_icon').each(function() {
var selectedIndex = this.selectedIndex;
$(this).ddslick({ defaultSelectedIndex: 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();