Question

我有一个下拉列表和一个标签。我的问题是，当我选择一个选项时，标签的值必须由此改变。

我该怎么办？

Answer 1

您应该先尝试一下，我创建一个演示可能会帮助您

function update(a){
  var select = (a.value || a.options[a.selectedIndex].value); 
   document.getElementById("result").innerText = select;
}

function update(a){
  var select = (a.value || a.options[a.selectedIndex].value); 
   document.getElementById("result").innerText = select;
}

window.onload = function(){
var select = document.getElementById("test").value; 
   document.getElementById("result").innerText = select;
};

<select id="test" onchange="update(this)">
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</option>
</select>
<label id="result"></label>

Answer 2

您可以将函数绑定到onchange事件，以检查下拉列表中的更改：

document.getElementById('dropdown').onchange = e => document.getElementById('label').innerText = e.target.value

<label id="label">Select</label>
<select id="dropdown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

一个简短的jQuery版本：

$('#dropdown').change(() => $('#label').text($(this).value))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label id="label">Select</label>
<select id="dropdown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Answer 3

尝试这样。

在您的选择标记中添加onchange事件。

只需在js函数中获取该值，然后使用innerText

替换元素的文本

function changeVal(e){
  document.getElementById("lab").innerText  = e.value;
}

<label id="lab"> Label </label>

<select onchange="changeVal(this)">
  <option value=""></option>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
</select>

Answer 4

尝试一下：

<html>
<body>

<script>
function myFunction(){
        var e = document.getElementById("brand");
        var strUser = e.options[e.selectedIndex].value;
        //alert(strUser);
        document.getElementById("lab").innerHTML = strUser;
}    
</script>


<label id="lab">generic value</label>
<select onchange="myFunction()" id="brand">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

</body>
</html>

基本上，在选择标签的值更改时，所选值将放置在标签标签内。希望能有所帮助。

如何通过所选下拉菜单的值更改标签值？

4 个答案: