在列中显示选择框答案

【问题标题】：Display Select box in a column在列中显示选择框
【发布时间】：2011-07-11 02:58:46
【问题描述】：

我试图在 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>

【问题讨论】：

不可能...你怎么能替换标准 html 元素的性质？？

标签： javascript jquery html ajax dhtml

【解决方案1】：

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

jQuery SelectBox Plugins

【讨论】：

【解决方案2】：

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

【讨论】：

你知道我可以使用什么插件吗？

【解决方案3】：

JS代码：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

【讨论】：