如何获得下拉项的值(不是选择选项语句)

How to get value of dropdown item (not select-option statement)

本文关键字：选择 选项 语句 何获得      更新时间：2023-09-26

如果我下拉

<select id="city">
        <option value="blore">Bangalore</option>
        <option value="delhi">Delhi</option>
        <option value="che">Chennai</option>
        <option value="jaipur">Jaipur</option>
        <option value="hyd">Hyderabad</option>
        <option value="mum">Mumbai</option>
        <option value="pune">Pune</option>
</select>

则可以使用以下命令提取下拉框所选的值:

document.getElementById('city').value

但是因为我们不能样式选择选项下拉，我想知道是否有任何方法，我定义一个列表类型下拉，可以提取值用户选择在javascript。

之类的。(下拉列表)

<ul id="city">
<li value="something1">Something1</li>
<li value="something2">Something2</li>
<li value="something3">Something3</li>
</ul>

和document.getElementById('city').value

如果我错了，请纠正我，或者有任何其他方法来定义一个样式的下拉菜单，其值可以在javascript中提取处理。

如果需要更多的代码，请将其放在注释中。

提前感谢:)

由于您基本上希望在不使用表单元素的情况下模仿表单元素的功能，因此需要在javascript中进行一些额外的工作。jQuery将极大地简化这一过程，因此我将在本例中使用它。如今，当想要将任意数据附加到html元素时，常见的做法是使用带有"data-"前缀的属性。你马上就会知道为什么。

所以，对于你的例子，你可以使用标记: 
<ul id="city" data-value="">
<li data-value="something1">Something1</li>
<li data-value="something2">Something2</li>
<li data-value="something3">Something3</li>
</ul>

样式你的列表，但你喜欢，包括js创建"下拉"的效果，等等。如果你想节省更多的时间，我建议你看看bootstrap的下拉组件。

最后，你需要创建一个javascript来选择一个值，并把这个值作为'selected'放在你的父元素中:

$('#city li').click(function() {
  $(this).parent().data('value', $(this).data('value')); 
});

这是利用jQuery的。data()方法作为设置和获取数据属性的快捷方式。

你现在可以通过调用

来访问当前选择的值
$('#city').data('value');

如果没有jQuery，则涉及更多内容。我把它留给你，你是否认为追求一个普通的js解决方案是有用的。

相关文章：