コンマで区切られた値でデータを含む変数に基づいて、選択ボックスに入力するにはどうすればよいですか?
例:
var x = Jenny,John,Stephanie,Marc,Ryan,Jessica
期待される結果:
[DROP DOWN BOX]
Jenny
John
Stephanie
Marc
Ryan
Jessica
コンマで区切られた値でデータを含む変数に基づいて、選択ボックスに入力するにはどうすればよいですか?
例:
var x = Jenny,John,Stephanie,Marc,Ryan,Jessica
期待される結果:
[DROP DOWN BOX]
Jenny
John
Stephanie
Marc
Ryan
Jessica
HTML
<select id="myoptions">
</select>
JavaScript
var x = "Jenny,John,Stephanie,Marc,Ryan,Jessica";
var options = x.split(",");
var select = document.getElementById('myoptions');
for(var i=0; i<options.length; i++)
{
select.options[i] = new Option(options[i], i); //new Option("Text", "Value")
}
以下は純粋な JavaScript です。
var x = 'Jenny,John,Stephanie,Marc,Ryan,Jessica';
x = x.split(',');
select = document.createElement('select');
for (var i=0;i<x.length;i++) {
var new_option_element = new Option(x[i], x[i]);
select.appendChild(new_option_element);
}
document.body.appendChild(select);
このようなものが動作するはずです:
<select id="DropDownList">
</select>
<script type="text/javascript" language="javascript">
var x = "Jenny,John,Stephanie,Marc,Ryan,Jessica";
var splitValues = x.split(",");
for (var i = 0; i < splitValues.length; i++) {
var opt = document.createElement("option");
// Add an Option object to Drop Down/List Box
document.getElementById("DropDownList").options.add(opt);
// Assign text and value to Option object
opt.text = splitValues[i];
opt.value = splitValues[i];
}
</script>
これの簡単な手段は次のとおりです。
function populateWithChildren(parent, childTag, values) {
if (!parent || !values) {
// no parent element, or no values, nothing can be done so quit here
return false;
} else {
// this ensures that 'values' is an array:
// if values is a string, it splits that string (assuming a comma delimiter),
// and split() returns an array, otherwise:
// we assume it's already an array and use that.
values = typeof values === "string" ? values.split(',') : values;
// iterates through all the values in the 'values' array,
for (var i = 0, len = values.length; i < len; i++) {
// creates a new element (as passed in the 'childTag' variable)
var newElem = document.createElement(childTag),
text = document.createTextNode(values[i]);
// appends the textNode to the created element
newElem.appendChild(text);
// appends the created-element to the 'parent' node passed to the function
parent.appendChild(newElem);
}
}
}
var parent = document.getElementById('select'),
x = 'Jenny,John,Stephanie,Marc,Ryan,Jessica';
populateWithChildren(parent, 'option', x);
JavaScript
var x = 'Jenny,John,Stephanie,Marc,Ryan,Jessica'.split(',');
for (var i=0; i<x.length; i++) {
document.getElementById("names").options[i] = new Option(x[i], x[i]);
}
HTML
<select id="names"></select>
デモ