javascript - 使用 Javascript 创建 newOption() 时附加文本和值

Question

发生了一些非常奇怪的事情，在尝试了很多其他选项之后我不知道该怎么做。我正在尝试使用 Javascript 创建一个 HTML 选项。我能够获得要创建的选项，但是没有附加文本或值。如果有人有不同的方法，我想看看。谢谢。

JS

function createOption{
var text = 'Orange';
var value = 'Fruit'
var additionalData = '#fruit123';
var pages = document.getElementById('pages');
var pageContainer = document.getElementById('pageContainer');
pages.style.display = 'block';
pageContainer.style.display = 'block';

document.getElementById("pages").insertBefore(new Option('', ''),
document.getElementById("pages").firstChild);

pages= new Option(text,value).dataset['id'] =additionalData;
}

HTML

 <button type="button"onclick="createOption();return false;">

<div id="pageContainer" style="display:none;">

<select id="pages" style="display:none; cursor:pointer;" onchange="getOption();">
<option>Please make a choice</option>
</select>


<div id="page_link"></div>
</div>  

这是我看到的输出:

Answer 1

像这样尝试:

var option = document.createElement('option');
option.text('Your text here')
option.value('your value here')


document.getElementById('pages').add(option);

首先，我们创建我们的选项 HTML 元素，然后添加所需的文本和值，完成后我们将选择我们的选项并通过 .add( ) 方法。

或者，如果您只想使用 Option 类，您可以这样做:

var option = new Option("Text", "Value")

document.getElementById('pages').add(option)

因此，您的代码将如下所示:

function createOption{

     var text = 'Orange';
     var value = 'Fruit'
     var additionalData = '#fruit123';
     var pages = document.getElementById('pages');
     var pageContainer = document.getElementById('pageContainer');
     pages.style.display = 'block';
     pageContainer.style.display = 'block';

     //Create the option
     var option = new Option(text, value);
     pages.add(option);

     //create the data-id attribute, add it to the option
     var attribute = document.createAttribute("data-id");
     option.setAttributeNode(attribute);

     //Assign the respective data to the data-id attribute
     option.dataset['id'] = additionalData;

}

特别注意.setAttributeNode()。这是一个内置的 JavaScript 方法，它允许我们为 HTML 元素分配一个在我们的代码中创建的属性。我注意到您没有将 data-id 属性添加到您的 HTML 中，因此以防万一，我们已经动态分配了该属性。

让我知道它是否有效!我已经对其进行了测试，它应该可以满足您的需要。