JS、jQuery中select的用法详解

什么是select

在表单中，select元素可以让用户从指定的一组选项中选择一个或多个选项。在HTML中，我们使用<select>元素来呈现选择框。select元素同时也包括<option>元素，每一个option元素就是一个选择项。

基本语法

select语法格式如下：

<select>
    <option value="option1_value">Option 1</option>
    <option value="option2_value">Option 2</option>
    <option value="option3_value">Option 3</option>
    ...
</select>

上面的代码中，<select>表示一个选择框，<option>则表示一个选项。

属性

在HTML中，select元素还提供了一些属性，方便我们对其进行控制。

multiple属性

如果需要在select元素中选择多个选项，可以在<select>标签中添加multiple属性。

<select multiple>
    <option value="option1_value">Option 1</option>
    <option value="option2_value">Option 2</option>
    <option value="option3_value">Option 3</option>
    ...
</select>

size属性

如果需要修改选择框的大小，可以使用size属性，该属性值表示在选择框中显示的选项数。

<select size="4">
    <option value="option1_value">Option 1</option>
    <option value="option2_value">Option 2</option>
    <option value="option3_value">Option 3</option>
    <option value="option4_value">Option 4</option>
    <option value="option5_value">Option 5</option>
</select>

JS操作select

在JavaScript中，我们也可以通过一些方法来对select元素进行操作。

获取选择的选项

可以使用select元素的selectedIndex属性，来获取当前选择的选项索引。

var selectElement = document.getElementById('mySelect');
var selectedIndex = selectElement.selectedIndex;
console.log(selectedIndex);

上面的代码中，document.getElementById('mySelect')表示获取id为mySelect的select元素，selectedIndex表示获取当前选择的选项索引。

修改选择选项的内容

可以使用select元素的options属性，来获取包含所有选项的NodeList对象。我们可以通过修改该对象中某个option元素的text属性，来修改该选项的内容。

var selectElement = document.getElementById('mySelect');
selectElement.options[1].text = 'Option 2 Modified';

上面的代码中，selectElement.options[1]表示获取第二个选项元素，.text表示设置该选项的文本内容。

jQuery操作select

在jQuery中，我们同样可以通过一些方法来对select元素进行操作。

获取选择的选项

可以使用val()方法，来获取当前选择的选项的值。

var selectedValue = $('#mySelect').val();
console.log(selectedValue);

上面的代码中，$('#mySelect')表示获取id为mySelect的select元素，.val()表示获取当前选择的选项的值。

修改选择选项的内容

可以使用text()方法，来修改选项的内容。

$('#mySelect option:eq(1)').text('Option 2 Modified');

上面的代码中，$('#mySelect option:eq(1)')表示获取第二个选项元素，.text()表示设置该选项的文本内容。

示例

接下来，我们来看两个实际的例子，通过代码演示select的用法。

示例一：禁用select选项

HTML代码如下：

<select id="mySelect">
    <option value="option1_value">Option 1</option>
    <option value="option2_value">Option 2</option>
    <option value="option3_value">Option 3</option>
</select>

JavaScript代码如下：

var selectElement = document.getElementById('mySelect');
selectElement.options[1].disabled = true;

jQuery代码如下：

$('#mySelect option:eq(1)').prop('disabled', true);

在上面的代码中，我们实现了禁用第二个选项的效果。

示例二：根据选择自动填充表单

HTML代码如下：

<form>
    <select id="mySelect">
        <option value="0">请选择</option>
        <option value="1">选项一</option>
        <option value="2">选项二</option>
        <option value="3">选项三</option>
    </select>
    <input type="text" id="myText" placeholder="请输入"/>
</form>

JavaScript代码如下：

var selectElement = document.getElementById('mySelect');
var textElement = document.getElementById('myText');
selectElement.onchange = function() {
    textElement.value = selectElement.options[selectElement.selectedIndex].innerHTML;
};

jQuery代码如下：

$('#mySelect').change(function() {
    $('#myText').val($('#mySelect option:selected').text());
});

在上面的代码中，我们实现了在选择选项后自动填充文本框的效果。