发生了一些非常奇怪的事情,在尝试了很多其他选项之后我不知道该怎么做。我正在尝试使用 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>
最佳答案
像这样尝试:
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 中,因此以防万一,我们已经动态分配了该属性。
让我知道它是否有效!我已经对其进行了测试,它应该可以满足您的需要。
关于javascript - 使用 Javascript 创建 newOption() 时附加文本和值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46572406/