使用Javascript

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()方法将其添加到HTML select元素

Alternatley，如果你只是想使用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中，因此如果有原因，我们已动态分配了该属性。

让我知道它是否有效！我已经测试了它，它应该为你做的伎俩。

Answer 2

试试这个：

＆＃13;

＆＃13;

var select = document.getElementById( "mySelect" );

select.add( createOption( "a", "1", { add1: "foo1", add2: "bar1" } ) );
select.add( createOption( "b", "2", { add1: "foo2", add2: "bar2" } ) );
select.add( createOption( "c", "3", { add1: "fruit", add2: "loop" } ) );
select.add( createOption( "d", "4" ) );
select.add( createOption( "e", "5", { add1: "none", add2: "john doe" } ) );

select.onchange = function(evt) {
	
    var allData = "";
    var option = evt.target.options[evt.target.selectedIndex];
    
    allData += option.innerHTML;
    allData += " value: " + option.value;
    for ( d in option.dataset ) {
    	allData += "\n    " + d + ": " + option.dataset[d];
    }
    
    alert( allData );
    
};

function createOption( text, value, data ) {

	var newOpt = document.createElement( "option" );
    newOpt.innerHTML = text;
    newOpt.value = value
    
    for ( d in data ) {
        newOpt.dataset[d] = data[d];
    }
    
    return newOpt;
}

＆＃13;

<select id="mySelect">
    <option>Make a choice!</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 3

从这里开始：https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement/Option

var pages = document.getElementById('pages');

// new Option([the text to show], [the value of option], [boolean, defaultSelected], [boolean, selected or not]);
var opt = new Option('The first text', 'the value', true, true);

// pages.add([the Option object], position);
pages.add(opt, 0); 

new Option('The first text', 'the value', true, true);的HTML结果 是：

<option value="the value" selected>The first text</option>

JSFiddle example