使用 <p> 标签，为什么这里的监督变得如此琐碎、自以为是、肛门、无情和被动攻击？这是一个代码论坛。顺便说一句 -1

Question

如何从 select 下拉列表中捕获选项标签（而非值）并在选项为 selected 时创建 h1 标题。我还需要忽略“请选择”select离子？仅当 selected 选项（除 Please Choose 之外）时才应创建标题。谢谢

  <select name="cars" id="cars">
    <option value="" selected>Please Choose</option> 
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

我需要 <h1>Audi</h1> 而不是 <h1>audi</h1>

Answer 1

我猜你正在寻找这样的东西？此代码段将在 #cars 更改时更新 #display 的值

document
  .querySelector("#cars")
  .addEventListener("change", event =>
      document
        .querySelector("#display")
        .innerText = event.target.value
  )

<select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<h1 id="display">place user selected option value here e.g. Audi</h1>

Answer 2

尝试这样的事情；

function manageSelect() {
 document.getElementById('heading').innerHTML = document.getElementById('cars').value;
}



 <select name="cars" id="cars" onchange="manageSelect()">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<h1 id='heading'>°place user selected option label here e.g. Audi*</h1>

https://jsfiddle.net

Answer 3

基于这个答案。您可以在 'Please Choose' 选项上添加禁用属性以防止用户恢复选项

document
  .querySelector("#cars")
  .addEventListener("change", event =>
      document
        .querySelector("#display")
        .innerText = event.target.value
  )

<select name="cars" id="cars">
    <option value="" selected disabled>Please Choose</option> 
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

<h1 id="display">place user selected option value here e.g. Audi</h1>

Answer 4

这对我有用：

<select name="cars" id="cars">
  <option value="" selected disabled>Please Choose</option> 
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<h1 id="carSelected"></h1>

和

//target the element
var sel = document.querySelector('#cars');

//attach the event
sel.addEventListener('change', function(){
  //get and set the value
 if (document.getElementById('cars').value != ""){ 
  document.querySelector('#carSelected').textContent = this.options[this.selectedIndex].text;
  }
});

// execute the event on page load
var event = new Event('change');
sel.dispatchEvent(event);

感谢大家帮助我解决问题

使用 <p> 标签，为什么这里的监督变得如此琐碎、自以为是、肛门、无情和被动攻击？这是一个代码论坛。顺便说一句 -1

Using <p> tags why has oversight here become so petty, self righteous, anal, unforgiving & passive aggressive? It's a code forum. BTW -1

html

javascript

select

dropdown