如何使用jquery或javascript使用选定的下拉选项文本设置innerhtml
How to set innerhtml with selected dropdown option text using jquery or javascript?
我想使用选定的下拉选项文本更改锚标记的内部文本
这是我的下拉列表代码,在此下拉列表中选择的任何选项,我想在另一个锚标记中更新该选项的文本
<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列出所选文本
<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 文本英语更改为日本人。
这是我尝试过的代码,但它不起作用
<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>
试试这个.. :)
<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>
试试 javaScript
var e = document.getElementById("shopperlanguage");
var strUsertext = e.options[e.selectedIndex].text;
document.getElementsByClassName("dropdown-open")[0].childNodes[1].nodeValue = strUsertext;
演示
使用 On change Jquery with javascript
$('#shopperlanguage').on('change', function () {
$(".dropdown-open")[0].childNodes[1].nodeValue = this.options[this.selectedIndex].text;
}).change();
演示
我<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>
<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>
这是工作演示。请尝试一下。
相关文章:
- 或者在表单上选择默认选项文本(选择1)
- 在ractive.js中获取所选选项文本
- 使用VueJs获取Select选项文本
- Rally App SDK 2.0:rallymultiobjectpicker无法加载选项文本
- 选择选项文本作为数组
- 动态更改选项文本不起作用
- 页面重定向后,使用选定的选项文本更新下拉菜单文本
- 为什么选择只显示IE 9中选项文本的第一个字符
- 如何在jquery的选择下拉列表中获取选项文本
- 如何使“所选选项”与当前“所选选项”文本的宽度相同
- 使用选择选项文本更改价格
- 使用挖空将选项文本绑定到具有对象数组的属性
- 传递要发送的数据.选择选项文本和值
- 挖空.js从 AJAX 调用获取数据后更新选项文本
- 在选择框中从任意 JavaScript 对象绑定选项值和选项文本
- 显示选择选项文本日期
- 如何使用jquery或javascript使用选定的下拉选项文本设置innerhtml
- JSColor 不适用于 Volusion 选项文本框
- 如何在 HTML 选择中对选项文本的某些部分使用不同的颜色
- 获取基于值的选择选项文本