jquer 获取select key 和 value
时间: 2023-12-06 17:44:30 浏览: 25
可以使用 jQuery 的 `val()` 方法来获取选中的选项的值,使用 `text()` 方法或 `html()` 方法来获取选中的选项的文本。
以下是一个示例代码:
```html
<select id="mySelect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
```
```javascript
// 获取选中的选项的值
var selectedValue = $('#mySelect').val();
console.log(selectedValue);
// 获取选中的选项的文本
var selectedText = $('#mySelect option:selected').text();
console.log(selectedText);
```
注意,如果要获取选中的选项的 HTML 内容,应该使用 `html()` 方法,而不是 `text()` 方法。
相关问题
把map集合的key和value绑定到select下拉框的key和value
将Map集合的key和value绑定到select下拉框的key和value,可以使用JavaScript或者JQuery来实现。
以下是一个使用JQuery的例子:
```html
<select id="mySelect">
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var myMap = new Map();
myMap.set("key1", "value1");
myMap.set("key2", "value2");
myMap.set("key3", "value3");
var mySelect = $('#mySelect');
myMap.forEach(function (value, key) {
mySelect.append($('<option></option>').val(key).html(value));
});
</script>
```
在这个例子中,我们定义了一个Map集合,并将其填充了一些数据。然后,我们通过JQuery获取了一个select元素,并使用forEach()方法将Map集合的key和value绑定到select下拉框的key和value。
这个例子中,我们使用了JQuery的append()方法来向select元素中添加option元素,并将Map集合中的key和value设置为option元素的value和html属性值。
jquery mobile 下拉框异步获取数据的例子
以下是一个使用jQuery Mobile实现异步获取数据的下拉框例子:
HTML代码:
```
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">选择国家:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="">请选择...</option>
</select>
</div>
```
JavaScript代码:
```
$(document).on('pageinit', function() {
var url = 'http://api.worldbank.org/countries?format=jsonP&prefix=?';
$.getJSON(url, function(data) {
var select = $('#select-choice-1');
$.each(data[1], function(key, val) {
select.append($('<option>', {
value: val['id'],
text: val['name']
}));
});
select.selectmenu("refresh");
});
});
```
这个例子使用了世界银行提供的API来获取国家的数据。我们使用`$.getJSON`方法来异步获取数据,然后使用jQuery的`$.each`方法来遍历数据并将每个国家添加到下拉框中。最后,我们调用`selectmenu("refresh")`方法来刷新下拉框的显示。