如何使用jquery或javascript设置带有选定下拉选项文本的innerhtml？

Question

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

这是我的下拉列表代码，无论在这个下拉列表中选择什么选项，我都想在另一个锚标记中更新该选项的文本

<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=“下拉打开”innerhtml。

列出选定的文本

<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文本英语更改为japanee。

这是我试过的代码，但不起作用。

<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>

Answer 1

在javaScript中尝试

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

演示

使用javascript更改Jquery

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

演示

Answer 2

试试这个..。:)

<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>

Answer 3

我将<span class="text"></span>添加到标记中，以便更容易地选择目标区域：

​

$('#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>

​