Question

我正在尝试获取选项元素的值和内容。到目前为止，我已使用this.value获取值，如下所示

<select name='name' id='name' onchange='someFunction(this.value)'>
    <option selected='selected' disabled='disabled' value=''>CONTENT</option>
     " . $options . "
</select>";

我可以在onchange事件中传递“CONTENT”以及值吗？

这样的事可能...... onchange='showAccountInfo(this.value, ???)

任何帮助都会非常棒！谢谢！

Answer 1

<select name='name' id='name' onchange='someFunction(this)'>
    <option selected='selected' disabled='disabled' value=''>CONTENT</option>
     " . $options . "
 </select>"

 function someFunction(obj)
 {
     var value = obj.value;
     var content = obj.querySelector("option:checked").textContent;
 }

应该这样做：

我更改了onchange函数中传递的对象。它使用关键字this将select对象传递给函数。然后我们使用value选择值和使用选择器option:checked选择所选选项的querySelector。这样您的代码就变得更具可读性。

但是你可以将它存储在onchange中：

onchange='showAccountInfo(this.value, this.querySelector("option:checked").textContent)'

就我个人而言，我不会使用（或推荐）使用内联事件。

我会这样使用addEventListener：

＆＃13;

     function someFunction(e)
     {
        //this refers to the select element (the owner of the event);
         var value = this.value;
         var content = this.querySelector("option:checked").textContent;
         alert("value: " + value + " content: " + content);
     }

     document.querySelector("#name").addEventListener("change", someFunction, false); //attach an onchange event using the addEventListener method.

//I'm using document.querySelector here to select an element on the page.

＆＃13;

    <select name='name' id='name' >
        <option selected='selected'  value='1:'>CONTENT 1</option>
        <option value='2:'>CONTENT 2</option>
        <option value='3:'>CONTENT 3</option>
        <option value='4:'>CONTENT 4</option>
     </select>

＆＃13;

如何在js中获取元素的内容？

1 个答案: