淘先锋技术网

首页 1 2 3 4 5 6 7

javascript 创建select

在前端开发中，JavaScript是不可或缺的一门语言。它可以为我们提供很多方便的功能，比如说创建一个下拉框（select）。下面我们就来介绍一下JavaScript如何创建select。

首先，在HTML中我们可以使用

var selectElement = document.createElement('select');
document.body.appendChild(selectElement);

这段代码中，我们使用了document.createElement()方法来创建一个select元素，然后使用appendChild()方法将它添加到了文档中的body标签内。

接下来，我们需要创建option元素并添加到select元素中。我们可以通过循环来创建多个option元素，并添加到select元素中。比如下面这段代码：

var selectElement = document.createElement('select');
for (var i = 1; i<= 5; i++) {
var optionElement = document.createElement('option');
optionElement.value = i;
optionElement.innerHTML = 'Option '+ i;
selectElement.appendChild(optionElement);
}
document.body.appendChild(selectElement);

这段代码中，我们循环了5次，每次创建一个option元素，设置它的value和innerHTML属性，然后把它添加到select元素中。最后再将select元素添加到body标签内，就可以在页面上看到一个下拉框了。

上面的代码仅仅是一个基本的例子，我们还可以对下拉框进行更多的设置。比如说，我们可以设置下拉框的默认选项：

var selectElement = document.createElement('select');
var optionElement1 = document.createElement('option');
optionElement1.value = 'option1';
optionElement1.innerHTML = 'Option 1';
selectElement.appendChild(optionElement1);
var optionElement2 = document.createElement('option');
optionElement2.value = 'option2';
optionElement2.innerHTML = 'Option 2';
selectElement.appendChild(optionElement2);
var optionElement3 = document.createElement('option');
optionElement3.value = 'option3';
optionElement3.innerHTML = 'Option 3';
selectElement.appendChild(optionElement3);
selectElement.value = 'option2';
document.body.appendChild(selectElement);

这段代码中，我们创建了3个option元素，然后将它们添加到select元素中。最后通过设置select元素的value属性，我们将默认选项设置为第二个选项（value为'option2'的那个选项）。

除了设置默认选项，我们还可以设置下拉框的大小、颜色等样式。这里我们借助CSS来设置样式。以下是一个设置样式的例子：

var selectElement = document.createElement('select');
var optionElement1 = document.createElement('option');
optionElement1.value = 'option1';
optionElement1.innerHTML = 'Option 1';
selectElement.appendChild(optionElement1);
var optionElement2 = document.createElement('option');
optionElement2.value = 'option2';
optionElement2.innerHTML = 'Option 2';
selectElement.appendChild(optionElement2);
var optionElement3 = document.createElement('option');
optionElement3.value = 'option3';
optionElement3.innerHTML = 'Option 3';
selectElement.appendChild(optionElement3);
selectElement.style.width = '200px';
selectElement.style.height = '30px';
selectElement.style.color = 'red';
document.body.appendChild(selectElement);

这段代码中，我们设置了下拉框的宽度为200像素，高度为30像素，字体颜色为红色。我们可以根据需要自由设置样式。

最后，我们还可以通过JavaScript来监听下拉框选项改变的事件。比如以下代码可以实现在用户选择不同的选项时弹出该选项的value值：

var selectElement = document.createElement('select');
var optionElement1 = document.createElement('option');
optionElement1.value = 'option1';
optionElement1.innerHTML = 'Option 1';
selectElement.appendChild(optionElement1);
var optionElement2 = document.createElement('option');
optionElement2.value = 'option2';
optionElement2.innerHTML = 'Option 2';
selectElement.appendChild(optionElement2);
var optionElement3 = document.createElement('option');
optionElement3.value = 'option3';
optionElement3.innerHTML = 'Option 3';
selectElement.appendChild(optionElement3);
selectElement.addEventListener('change', function() {
alert('You selected '+ this.value);
});
document.body.appendChild(selectElement);

这段代码中，我们使用addEventListener()方法来为select元素添加一个change事件的监听器。每次用户选择不同的选项时，都会弹出一个提示框，显示用户选择的选项的value值。

到这里，我们就介绍完了JavaScript创建下拉框的方法。我们可以根据自己的需要灵活使用JavaScript来创建一个自己需要的下拉框。