Menu
I want to show list of countries with select options like this:
<select id="country_code">
<option value="358"> Finland(+358)</option>
<option value="33"> France(+33)</option>
<option value="43"> Austria(+43)</option>
</select>
When user selects a country, I want only the code to be displayed as the selected option.
This is what I've tried:
$("#country_code").change(function(){
$(this).find("option:selected").text("+"+$(this).find("option:selected").text().match(/(\d+)/g));
})
This code is separating the Code (regex is for separating the number) from selected option and displays it instead of the full name, and it works.
But the problem is when I try to select some other countries, the previous options have changed! and i can not get it back.
it look like this :
<select id="country_code">
<option value="358"> +358</option>
<option value="33"> France(+33)</option>
<option value="43"> +43</option>
</select>
How should I accomplish this? I have searched online with no results.
301
In order to change the selected option by the value attribute, all we have to do is change the value property of the <select> element. The select box will then update itself to reflect the state of this property. This is the easiest and most straightforward way of updating a select box state.
Use the selectedIndex Property We can get the index of the selected item with the selectedIndex property. Then we can use the text property to get the text of the selected item. We create the getSelectedText function that takes an element as the parameter. Then we check if selectedIndex is -1.
Set the value Property of the Select Drop Down We can change the HTML select element's selected option with JavaScript by setting the value property of the select element object. We have a select drop down with some options and 2 buttons that sets the selected options when clicked.
My version: :)
$( "#country_code" ).change( function()
{
var $this = $( this )
$this.find( "option:first" ).text( '+' + $this.val() ).val( $this.val() ).prop( 'selected', true )
} )<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country_code">
<option value="" style="display: none;" selected="selected">select a country</option>
<option value="358"> Finland(+358)</option>
<option value="33"> France(+33)</option>
<option value="43"> Austria(+43)</option>
</select>You can store the previous selected data.
like this:
var $previousOption,storedText;
$("#country_code").change(function(){
if($previousOption!=null){
$previousOption.text(storedText)
}
$previousOption=$(this).find("option:selected");
storedText=$previousOption.text();
$(this).find("option:selected").text("+"+$(this).find("option:selected").text().match(/(\d+)/g));
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country_code">
<option value="358"> Finland(+358)</option>
<option value="33"> France(+33)</option>
<option value="43"> Austria(+43)</option>
</select>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
