How to set innerhtml with selected dropdown option text using jquery or javascript?

Question

I want to change the inner text of a anchor tag with the selected drop down option text

Here is my code of dropdown list whatever option is selected in this drop down list i want to update that option's text in another anchor tag

<span style="white-space: nowrap;" class="" id="shopperlanguage_fs">
<select class="input" id="shopperlanguage" name="shopperlanguage">
<option value="ja_JP" class="japImg">japanees</option>
<option selected="" value="en" class="engImg">English (International)</option>/* whatever option is selected like this i want to get this text  */
</select>
</span>

I want to update anchor tag class="dropdown-open" innerhtml with above mentioned dropdown
list selected text

<div class="top-lang clearfix">
<div class="cat-select">
<a href="#" data-dropdown="#dropdown-2" class="dropdown-open"><img src="/site/images 
/lang_05.jpg"> English</a>    /* this is the anchor tag which innerhtml i want to change with selected dropdown option text */
</div>
</div>

Suppose if in dropdown list selected option having text japanees then i want to change the anchor tag innerhtml text english to japanees.

this is my code which i tried but its not working

<script  type="text/javascript">
var e = document.getElementById("shopperlanguage"); 
var strUsertext = e.options[e.selectedIndex].text;
var langValue =$(".dropdown-open").text()
langValue.innerHTML= strUsertext;
</script>

could you do a fiddle?

Anubhav
– Anubhav

2014-11-20 06:28:29 +00:00
Commented Nov 20, 2014 at 6:28 — Anubhav
– Anubhav, Commented Nov 20, 2014 at 6:28

Priyank · Accepted Answer · 2014-11-20 06:53:44Z

Just try this.. :)

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">     </script>
<span style="white-space: nowrap;" class="" id="shopperlanguage_fs">
<select class="input" id="shopperlanguage" name="shopperlanguage">
<option value="ja_JP" class="japImg">japanees</option>
<option selected="" value="en" class="engImg">English (International)</option>/* whatever   option is selected like this i want to get this text  */
</select>
</span>
<div class="top-lang clearfix">
<div class="cat-select">
<a href="#" data-dropdown="#dropdown-2" class="dropdown-open">
<img src="/site/images/lang_05.jpg"> English</a>    /* this is the anchor tag which innerhtml i want to change with   selected dropdown option text */
</div>
</div>
<script  type="text/javascript">
$('#shopperlanguage').change(function(){
$('.dropdown-open').text($(this).find('option:selected').text());
});
</script>

Balachandran · Accepted Answer · 2014-11-20 06:53:02Z

1

try in javaScript

var e = document.getElementById("shopperlanguage");
var strUsertext = e.options[e.selectedIndex].text;
document.getElementsByClassName("dropdown-open")[0].childNodes[1].nodeValue = strUsertext;

DEMO

use On change Jquery with javascript

$('#shopperlanguage').on('change', function () {
    $(".dropdown-open")[0].childNodes[1].nodeValue = this.options[this.selectedIndex].text;
}).change();

DEMO

edited Nov 20, 2014 at 6:53

answered Nov 20, 2014 at 6:35

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

3 Comments

Balachandran Over a year ago

@user2787474 Did you check my demo ?

user2787474 Over a year ago

yes its working fine but its flashing the old innerhtml of anchor tag on page load then updating with new one how to fix it?

user2787474 Over a year ago

Bala how can i change the img src inside anchor tag on the basis of selected option value?

PeterKA · Accepted Answer · 2014-11-20 06:33:50Z

1

I added <span class="text"></span> to your markup so it would be easier to select the target area:

$('#shopperlanguage').on('change', function() {
  $('.cat-select a span.text').text( $('option:selected',this).text() );
})
.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span style="white-space: nowrap;" class="" id="shopperlanguage_fs">
<select class="input" id="shopperlanguage" name="shopperlanguage">
<option value="ja_JP" class="japImg">japanees</option>
<option selected="" value="en" class="engImg">English (International)</option>
</select>
</span>
<div class="top-lang clearfix">
<div class="cat-select">
<a href="#" data-dropdown="#dropdown-2" class="dropdown-open"><img src="/site/images 
/lang_05.jpg"> <span class="text">English</span></a>
</div>
</div>

answered Nov 20, 2014 at 6:33

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

4 Comments

user2787474 Over a year ago

yes its working thanks but when i select a option in dropdown it flashes the old innerhtml of anchor tag then replace it with new innerhtml how to fix it

PeterKA Over a year ago

What browser and version are you using? Seems to work fine for me in latest chrome.

user2787474 Over a year ago

Im using firefox latest version

PeterKA Over a year ago

I have tested my demo in Firefox and it works fine too. Do you have a jsfiddle demo or the URL to your page so we could see the issue you're talking about?

Shailesh Katarmal · Accepted Answer · 2014-11-20 06:39:35Z

0

<select name="abc" id="abc" onchange="chng()">
<option value=""></option>
<option value="English">English</option>
<option value="Japanese">Japanese</option>
</select>


<a href="#" id="atag">English</a>

<script>
function chng()
{
   var s= document.getElementById('abc').value;
   document.getElementById('atag').innerHTML = s;
}
</script>

This is working Demo. Please try it.

answered Nov 20, 2014 at 6:39

Shailesh Katarmal

2,7931 gold badge15 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to set innerhtml with selected dropdown option text using jquery or javascript?

4 Answers 4

Comments

DEMO

DEMO

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest