Question

如果我下载了

<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

但是由于我们无法设置select-option下拉列表的样式，我想知道是否有任何方法可以定义列表类型下拉列表，并且可以提取用户在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中提取其值以进行处理，请更正我。

如果需要更多代码，请将其置于评论中。

提前致谢：）

Answer 1

由于您基本上希望在不使用表单元素的情况下模仿表单元素的功能，因此它将在javascript中进行一些额外的工作。 jQuery将大大简化这一点，因此我将在此示例中使用它。如果想要将任意数据附加到html元素，这些天的常见做法是使用前缀为＆＃34; data - ＆＃34;的属性。你会在一秒钟内看到原因。

因此，对于您的示例，您可以使用标记：

<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创建＆＃34;下拉列表＆＃34;如果您想节省更多时间，我建议您查看bootstrap's dropdown component。

最后，您需要创建javascript来选择一个值，然后将该值设置为＆＃39; select＆＃39;父元素中的一个：

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

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

您现在可以通过调用以下方式访问当前选择的值：

$('#city').data('value');

没有jQuery，还有更多参与。无论你认为追求一个普通的js解决方案有用，我都会留给你。

如何获取下拉项的值（不是select-option语句）

1 个答案: