如何使用自定义 html 下拉菜单<div><span></span></div><div id="text_translate"><p>我正在尝试创建一个定价表来展示基于购买条款（每月、每年、三年一次）的服务定价。</p><p> 从下拉列表中选择一个选项会使用 javascript 更改链接属性，这正是我想要的，但是，下拉选项的实际样式似乎相当困难。</p><p> 试图在没有任何可行解决方案的情况下连续数小时实现这一目标。</p><p> 附件是我想要实现的目标的图像。</p><p> <a href="https://i.stack.imgur.com/afsZC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/afsZC.png" alt="在此处输入图像描述"></a></p><p> 有谁知道我做错了什么？</p><pre> &lt;div class="ive-hpbox"&gt; &lt;h3&gt;Simple Price Box&lt;/h3&gt; &lt;div class="dropdown-plans"&gt; &lt;select id="dynamic_select"&gt; &lt;option value="cart.php?a=add&amp;pid=1548&amp;billingcycle=monthly"&gt; &lt;h3&gt;Monthly&lt;/h3&gt; &lt;span class="hp-price"&gt;$12.00/mo&lt;/span&gt; &lt;/option&gt; &lt;option value="cart.php?a=add&amp;pid=1548&amp;billingcycle=annually" selected&gt; &lt;h3&gt;SAVE 50%&lt;/h3&gt; &lt;span class="hp-disc-price"&gt;1 Year at &lt;strike&gt;$144.00/mo&lt;/strike&gt;&lt;/span&gt; &lt;span class="hp-price"&gt;$72.00/mo&lt;/span&gt; &lt;/option&gt; &lt;option value="cart.php?a=add&amp;pid=1548&amp;billingcycle=triennially"&gt; &lt;h3&gt;SAVE 70%&lt;/h3&gt; &lt;span class="hp-disc-price"&gt;3 Year at &lt;strike&gt;$432.00/mo&lt;/strike&gt;&lt;/span&gt; &lt;span class="hp-price"&gt;$129.60/mo&lt;/span&gt; &lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;p class="hecont act"&gt;Attractive selling introduction to the plan followed by an unordered list. &lt;strong&gt;Save huge&lt;/strong&gt; with a pro-plan.&lt;/p&gt; &lt;ul&gt; &lt;li&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; Disk Storage Space&lt;/li&gt; &lt;li&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; Accounts&lt;/li&gt; &lt;li&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; Antivirus Filtering&lt;/li&gt; &lt;li&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; Anti-spam Filtering&lt;/li&gt; &lt;li&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; Auto Responders&lt;/li&gt; &lt;li&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; IMAP / POP3 Protocols&lt;/li&gt; &lt;li&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt; Control Panel&lt;/li&gt; &lt;/ul&gt; &lt;a class="but_small1" href="#features"&gt;View Features&lt;/a&gt; &lt;a id="order-btn"&gt; Order now &lt;/a&gt; &lt;/div&gt; document.getElementById("dynamic_select").onclick = function() { document.getElementById("order-btn"):href = "https.//example.com/"+this;value+"/". }:ive-hpbox{ width;350px: border;1px solid #a1a1a1: border-radius.;25em: padding;10px: text-align;center. }:ive-hpbox:hover{ box-shadow,0 0 10px rgba(0,0,0.;15). } #dynamic_select option:hp-saving { font-size;26px: } #dynamic_select { border; 1px solid #a1a1a1: padding;10px: text-align;center: background;#fff: width;90%. }:ive-hpbox ul{ display;block: text-align;left; }</pre><p> <a href="https://jsfiddle.net/6rsgnmdy/52/" rel="nofollow noreferrer">https://jsfiddle.net/6rsgnmdy/52/</a></p></div>

Question

I'm trying to create a pricing table to showcase service pricing based on terms of purchase (Monthly, Annually, Trieannually).

Choosing an option from the dropdown changes the link attribute using javascript which is exactly what I want, however, the actual styling on the dropdown options seems to be rather difficult.

Trying to achieve this for hours on end without any working solution.

Attached is an image of what I am trying to achieve.

Does anyone know what I am doing wrong?

    <div class="ive-hpbox">
<h3>Simple Price Box</h3>

<div class="dropdown-plans">
<select id="dynamic_select">
  <option value="cart.php?a=add&pid=1548&billingcycle=monthly">
    <h3>Monthly</h3>
    <span class="hp-price">$12.00/mo</span>
  </option>
  <option value="cart.php?a=add&pid=1548&billingcycle=annually" selected>
    <h3>SAVE 50%</h3>
    <span class="hp-disc-price">1 Year at <strike>$144.00/mo</strike></span>
    <span class="hp-price">$72.00/mo</span>
  </option>
  <option value="cart.php?a=add&pid=1548&billingcycle=triennially">
  <h3>SAVE 70%</h3>
    <span class="hp-disc-price">3 Year at <strike>$432.00/mo</strike></span>
    <span class="hp-price">$129.60/mo</span>
  </option>
</select>
</div>

    <p class="hecont act">Attractive selling introduction to the plan followed by an unordered list. <strong>Save huge</strong>
with a pro-plan!</p>

<ul>
    <li><i class="fa fa-check"></i> Disk Storage Space</li>
    <li><i class="fa fa-check"></i> Accounts</li>
    <li><i class="fa fa-check"></i> Antivirus Filtering</li>
    <li><i class="fa fa-check"></i> Anti-spam Filtering</li>
    <li><i class="fa fa-check"></i> Auto Responders</li>
    <li><i class="fa fa-check"></i> IMAP / POP3 Protocols</li>
    <li><i class="fa fa-check"></i> Control Panel</li>
</ul>

<a class="but_small1" href="#features">View Features</a> <a id="order-btn"> Order now </a>
</div>

    document.getElementById("dynamic_select").onclick = function() {
    
    document.getElementById("order-btn").href = "https://example.com/"+this.value+"/";
    
}

.ive-hpbox{
  width:350px;
  border:1px solid #a1a1a1;
  border-radius:.25em;
  padding:10px;
  text-align:center;
}
.ive-hpbox:hover{
  box-shadow:0 0 10px rgba(0,0,0,.15);
}

#dynamic_select option .hp-saving {
  font-size:26px;
}

#dynamic_select {
  border: 1px solid #a1a1a1;
  padding:10px;
  text-align:center;
  background:#fff;
  width:90%;
}

.ive-hpbox ul{
  display:block;
  text-align:left;
}

https://jsfiddle.net/6rsgnmdy/52/

Answer 1

This cannot be done using a select/option tag.

I have seen people doing this with a <input type=radio> combined with a label . Hide the radio button, and each option is being written out in the label. Though then you still need to add JavaScript to show the selected value and the open/close to show all the options.

Other people also might do this with div's, but I personally don't like it, as with the radio/label solution you are still controlling the form directly instead of using JavaScript and you only use JS for visibility.