如何使用jquery或javascript设置带有选定的下拉选项文本的innerhtml? [英] How to set innerhtml with selected dropdown option text using jquery or javascript?

问题描述

我想使用所选的下拉选项文本更改锚标记的内部文本

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>

我想用上述下拉列表更新锚标记class ="dropdown-open" innerhtml
列出所选文字

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>

假设如果在下拉列表中选择了带有文本日本人的选项，那么我想将锚标签innerhtml文本英语更改为日本人.

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>

推荐答案

在JavaScript中尝试

try in javaScript

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

演示

使用javascript更改时使用jQuery

DEMO

use On change Jquery with javascript

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

这篇关于如何使用jquery或javascript设置带有选定的下拉选项文本的innerhtml?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！