Develop Reference

JS jQuery on change get innerHTML of select option tag

I know how to get the "value" of a selected option tag on change of the select dropdown. But how do I get the associated "text" i.e. inner HTML into the JS variable "country_name" ?
<select name="country" class="country">
<option value="please-select" disabled="disabled" selected="selected">select country</option>
<option value="DE">Germany</option>
<option value="ES">Spain</option>
<option value="FR">France</option>
<option value="IT">Italy</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$('select.country').on('change',function(){
var country_code = $(this).val();
var country_name = 'Selected Country Name';
alert(country_code+" - "+country_name);
});
</script>
Desired alert output for for instance the second option:
ES - Spain

You just need to build a selector relative to the dropdown, reaching into its option children and filtering to just the selected one, via jQuery's :selected pseudo-selector:
var country_name = $(this).children(':selected').text();

to get the selected text of the selected option of a select field I would do the following
$("select.country").change(function(){
var selectedCountry = $(this).children("option:selected");
var country_code = selectedCountry.val();
var country_name = selectedCountry.text();
alert(country_code+" - "+country_name);
});

Just add this in you javascript
$('select.country').on('change',function(){
var country_code = $(this).val();
var country_name = ( $(this).find(":selected").text() )
alert(country_code+" - "+country_name);
});

How to select the value in option if option value has slash

HTML select code
<select name="about" class="form-control radius0 clear-value"
id="aboutus"
onchange="this.options[this.selectedIndex].value &&
(window.location =
this.options[this.selectedIndex].value);">
<option value="aims-objective">AIMS & OBJECTIVES</option>
<option value="history">HISTORY</option>
<option value="our-supporters">OUR SUPPORTERS</option>
<option value="donate-now">DONATE NOW</option>
</select>
If option values are like this it picks up the value and shows in the dropdown. But now the option value is changed to
<option value="/about-us/aims-objective">AIMS & OBJECTIVES</option>
<option value="/about-us/history">HISTORY</option>
<option value="/about-us/our-supporters">OUR SUPPORTERS</option>
<option value="/about-us/donate-now">DONATE NOW</option>
FUNCTION
$(function(){ // Makes current value as default one
var selectedValue = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
console.log(selectedValue);
$("#aboutus").val(selectedValue);
})
It doesn't work now. What are the possible changes to be made in the onchange function. Thanks in advance !

Please check my answer, I assume you are in abc.test/about-us/history page and run the code and check, the HISTORY will be preselected.
Since the site url is not going to change you can follow this solution.
// script to chnage the dropdown
function selectChange(select){
var selectedValue;
if(select != undefined){
selectedValue = select.options[select.selectedIndex].value;
selectedValue = '/about-us/' + selectedValue;
select.options[select.selectedIndex].value = selectedValue;
$("#aboutus").val(selectedValue);
window.location = selectedValue;
}
else{
selectedValue = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
}
console.log(selectedValue);
$("#aboutus").val(selectedValue);
}
selectChange();
// script to pre select the dropdown
$(function(){
console.log(window.location.href);
var selectedValue = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
console.log(selectedValue);
$("#aboutus").val(selectedValue);
})
<div class="col-md-3 desktop styled-select">
<select name="about" class="form-control radius0 clear-value" id="aboutus" onchange="selectChange(this)">
<option value="aims-objective">AIMS & OBJECTIVES</option>
<option value="history">HISTORY</option>
</select>
</div>
Here is a Working DEMO

Facing issue while appending dropdown object with string in Jquery

I have to append dropdownlist in div with ul li. When I am append with whole ul li string then it is appearing like [object object] where as if I append only dropdown then it is coming as html dropdown control that is correct.
Is there any way to append dropdown with string?
My Html:
<select id='sel'>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
</select>
<a id="aselect" onclick="createNewSelect('#sel');">Add</a>
My jquery function:
function createNewSelect(a) {
var selVal = $(''+ a +'').val();
var ddl = $(''+ a +'').clone();
$('select').each(function() {
$(ddl).find("option[value='"+ selVal +"']").remove();
});
var newId = 'sel' + $('select').length;
$(ddl).attr('id',newId);
$('#aselect').attr("onclick","createNewSelect('#"+ newId +"')");
$("body").append("<li class=\"span3 no-margin\"><span>Social Media</span><br>" + ddl + "</li>");
$("body").append(ddl);
}
https://jsfiddle.net/4uqgmqzc/3/

You are trying to append whole object instead of html you need to update your code as shown below
function createNewSelect(a) {
var selVal = $(''+ a +'').val();
var ddl = $(''+ a +'').clone();
$('select').each(function() {
$(ddl).find("option[value='"+ selVal +"']").remove();
});
var newId = 'sel' + $('select').length;
$(ddl).attr('id',newId);
$('#aselect').attr("onclick","createNewSelect('#"+ newId +"')");
$("body").append("<li class=\"span3 no-margin\"><span>Social Media</span><br>" + ddl[0].outerHTML + "</li>");
$(ddl).change(function() {
createNewSelect(this);
});
}
good luck !!

You need to change your snippet to simple callback. Your snippet would be
<select id='sel'>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
</select>
<a id="aselect" onclick="createNewSelect2('#sel');">Add</a>
<ul id="out"></ul>
And your javascript code would be
function createNewSelect2 () {
$("#out").append("<li>" + $("select#sel :selected").text() + "</li>");
$("select#sel :selected").remove();
}
FIDDLE

try to append it like this $("body").append(ddl[0]);
What you are trying to append is a jquery object. Basically an array of all the select elements which in your case is just one. hence use the index accessor to get the select statement and append.

Select empty value in dropdown list with jQuery if not contains string

I'am trying to select the empty (first) value of a dropdown select option if it does not contains the value from an another dropdown select list:
$('#FirstDropdown').change(function() {
if ( $('#SecondDropdown option').filter(':contains(' + this.value + ')') ){
$('#SecondDropdown option').filter(':contains(' + this.value + ')').prop('selected',true);
}else{
$("#SecondDropdown option[value='']").prop('selected',true);
}
});
This code work well if #SecondDropdown option contains this.value but the else statement doesn't reset the dropdown list if not.
Any suggestion please ?
EDIT : The dropdown lists look like this :
<select id="FirstDropdown">
<option value="" selected="selected"> </option>
<option value="VAL1">First Value</option>
<option value="VAL2">Second Value</option>
<option value="VAL3">Third Value</option>
<option value="VAL4">Fourth Value</option>
</select>
<select id="SecondDropdown">
<option value="-1"> </option>
<option value="12">VAL1 SELECT OPTION</option>
<option value="15">VAL2 SELECT OPTION</option>
<option value="10">VAL3 SELECT OPTION</option>
</select>
EDIT : Added a JsFiddle.

You do not have any option element having value=''. You need to use $("#SecondDropdown option[value='-1']").prop('selected',true); . you would also need to change the condition in if statement to this.value!='':
$('#FirstDropdown').change(function() {
if ( this.value!='' ){
$('#SecondDropdown option').filter(':contains(' + this.value + ')').prop('selected',true);
}else{
$("#SecondDropdown option[value='-1']").prop('selected',true);
}});
Working Demo

Try this :There is problem in your if condition as it is getting always true. You can use .length to check if option exist and select the option else select blank
$('#FirstDropdown').change(function() {
if ($('#SecondDropdown option:contains('+this.value +')').length>0){
$('#SecondDropdown option:contains('+this.value +')').prop('selected',true);
}else{
$("#SecondDropdown option[value='-1']").prop('selected',true);
}
});
JSFiddle Demo

This will work for you.
First, you have to check you this.value, because any string contains ''.
Second, as if works fine, you just need to filter options by [value=-1]
Final JS:
$('#FirstDropdown').change(function() {
var $second = $('#SecondDropdown option').filter(':contains(' + this.value + ')');
if (this.value && $second){
$second.prop('selected',true);
}else{
$("#SecondDropdown option[value=-1]").prop('selected',true);
}
});

set dropdown selected text from comma seperated values

I am tring to set selected values in a dropdown from a comma seperated string,here i want to set text1,text2,text3,text4 as selected in the dropdown.
Thanks..
var string='text1,text2,text3,text4';
<select id="dropdown">
<option value="0">text1</option>
<option value="1">text2</option>
<option value="2">text3</option>
<option value="3">text4</option>
<option value="4">text5</option>
<option value="5">text6</option>
<option value="6">text7</option>
</select>

Here we go, you can make selected values like following:
var string='text1,text2,text3,text4';
var opts = string.split(",");
function selectOptions() {
var obj = $('#dropdown');
for (var i in opts) {
obj.find('option[value=' + i + ']').prop('selected', true);
}
}
selectOptions();
Fiddle Demo
Hope this will work!

I think you can use string.split(',')