在列中显示选择框

我想显示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>

来源

2011-03-08 emre

不可能...如何取代标准html元素的性质？ – diEcho 2011-03-08 13:35:16

如果是这样的非标准选择元件（未代码某种插件），恐怕这是不可能的。

来源

2011-03-08 13:29:05

你知道我可以使用任何插件吗？ – emre 2011-03-08 13:31:37

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

jQuery SelectBox Plugins

来源

2011-03-08 13:33:21 kjy112

JS代码：

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

来源

2011-03-08 13:35:40

这里是一个快速尝试修改代码。不是最佳的，但我已经没有时间

<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>

来源

2011-03-08 13:44:17 mplungjan

我使用这个插件（http://www.marghoobsuleman.com/jquery-image-dropdown）为风格的下拉框，因为它是不可能的样式非标准下拉框。该插件包含一个css文件，您可以根据需要指定自己的样式。

来源

2011-03-08 13:45:26

在列中显示选择框

回答

相关问题