当前位置：文江博客话题详情

在列中显示选择框

发布于 2024-10-20 14:46:41 字数 1511 浏览 4 评论 0原文

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

我有图像向您展示我正在尝试做什么。

这是我刚刚得到的。

1 http://www.thewebdesign .org/1a.png

我正在尝试变成

2 http://www.thewebdesign.org/2a.png

这是我正在使用的代码

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

原文

I am trying to display select box values in 4 columns. How can i do this. I am going to use it on local server.

I have got images to show you what i am trying to do.

this is what i have got just now.

1 http://www.thewebdesign.org/1a.png

I am trying to turn into

2 http://www.thewebdesign.org/2a.png

this is the code i am using

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

丶情人眼里出诗心の 2024-10-27 14:46:41

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

jQuery 选择框插件

回复收藏 0 原文

冰雪之触 2024-10-27 14:46:41

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

回复收藏 0 原文

可可 2024-10-27 14:46:41

JS代码：

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

JS code:

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

回复收藏 0 原文

遗心遗梦遗幸福 2024-10-27 14:46:41

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

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

Here is a quick attempt to modify your code. Not optimal, but I ran out of time

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

回复收藏 0 原文