Question

我正在尝试在4列中显示选择框值。我怎样才能做到这一点。 我将在本地服务器上使用它。

我有图像显示我想要做的事情。

这就是我刚才所拥有的。

我想变成

这是我正在使用的代码

<style type="text/css">
<!--

.myselectbox {

    font-family: Tahoma;
    font-size: 18px;
    background-color: #F5F5F5;


}
    option {
    font-family: Tahoma;
    font-size: 18px;
        background-color: #fef5e6;
        padding:8px;
        margin:5px;

        border-top: 1px solid #ebdac0;
        border-bottom: 1px solid #ebdac0;
        border-right: 1px solid #d6bb86;
        border-left: 1px solid #d6bb86;
    }
-->
</style>
</head>

<body>
<center>
<select name="amount_no1" class="myselectbox" id="amount_no1" >
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
</select> 
</center>
</body>

Answer 1

这是不可能的。您必须使用javascript来自定义选择框。以下是您可以浏览的jQuery插件列表：

jQuery SelectBox Plugins

Answer 2

如果那是标准的选择元素（不是某种插件），我担心这是不可能的。

Answer 3

JS代码：

document.getElementById("amount_no1").value = 4

Answer 4

以下是修改代码的快速尝试。不是最佳的，但我没时间了

<style type="text/css">

.myselectbox {

    font-family: Tahoma;
    font-size: 18px;
    background-color: #F5F5F5;


}


ul {
  float: left;
  width: 12em;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  float: left;
  width: 6em;
  font-family: Tahoma;
    font-size: 18px;
        background-color: #fef5e6;

      padding:8px;
        margin:5px;

        border-top: 1px solid #ebdac0;
        border-bottom: 1px solid #ebdac0;
        border-right: 1px solid #d6bb86;
        border-left: 1px solid #d6bb86;

} 
</style>
</head>

<body>
<div>
<select name="amount_no1" class="myselectbox" id="amount_no1" onclick="document.getElementById('ul1').style.display='block'">
              <option value="1">1</option>
</select>
<ul id="ul1" style="display:none"> 
              <li onclick="document.getElementById('amount_no1').options[0].text = 2;
              document.getElementById('ul1').style.display='none'">2</li>
              <li value="3">3</li>
              <li value="4">4</li>
              <li value="5">5</li>
              <li value="6">6</li>
              <li value="7">7</li>
              <li value="8">8</li>
 </ul>
</div>
</body>

Answer 5

我将此插件（http://www.marghoobsuleman.com/jquery-image-dropdown）用于样式化的下拉框，因为无法设置标准下拉框的样式。该插件包含一个css文件，您可以根据需要指定自己的样式。

显示列中的选择框

5 个答案: