Question

我有一组封装在div中的按钮，我希望看起来像一个下拉列表：

<div id="group">
     <label>Group:</label>
     <div value="1hour">1h</div>
     <div value="2hour">2h</div>
     <div value="3hour">3h</div>
</div>

我试图将上述内容转换为：

<label>Group</label>
 <select>
  <option value="1hour">1h</option>
   <option value="2hour">2h</option>
   <option value="3hour">3h</option>
</select>

然而，当我改变上面div菜单的外观时，我试图保留js代码并让代码与外观改变后的代码完全相同..

    $("div#group").each(function(i, ele) {
        $(ele).bind("click", function() { 
            drawChart(this); 
        });
    });


    drawChart: function(){
       //does something here;
    }

CSS中是否有任何改变感觉但不改变div的现有代码？有任何想法吗？？谢谢！

Answer 1

最好的方法是使用真正的选择框。您可以将js从单击处理程序更改为如下所示的更改处理程序，并且javascript应该与您现在的行为相同，除了它将传递<option>元素而不是<div>元素drawChart的参数。这对你有用吗？

<label>Group</label>
<select>
  <option value="1hour">1h</option>
  <option value="2hour">2h</option>
  <option value="3hour">3h</option>
</select>

$("select").change(function() {
    drawChart($(this).find("option:selected").get(0));
});

drawChart: function(){
   //does something here;
}

如何转换＆＃39; div＆＃39;使用CSS / Jquery进入下拉列表

1 个答案: