Html 下拉选择扩展选项

我正试图做一个下拉列表。你必须搜索包裹编号，你会得到详细信息，这样你就可以立即看到该包裹的正确价格或尺寸

            <div class="choosePackage">
            <label>
                <span>Package nr</span>
                <span>m3</span>
                <span>Size LxWxH</span>
                <span>Price</span>
                <span>Discount</span>
            </label>
            <select>
                <option value="">
                    <span class="optPackage"><strong>5528</strong></span>
                    <span class="optM3">9m3</span>
                    <span class="optLWH">1.00x2.00x3.40m</span>
                    <span class="optPrice">€70,00</span>
                    <span class="optDiscount">€280,00</span>
                </option>
            </select>         
        </div>

包装编号
m3
尺寸LxWxH
价格
优惠
5528
9m3
1.00x2.00x3.40m
€70,00
€280,00

我做了类似的东西，但你不能分割选项

---

我正在制定一个解决方案，但不得不参加一个会议。这应该给你一个基本的想法。基本上，您需要使用JS覆盖一个

样式的下拉列表

，它将链接到实际的下拉列表。然后，您可以在每个选项中设置不同的样式

从创建下拉选择开始

您需要将所有文本作为一个下拉列表

<select id="selectbox1">
    <option value="">Select an option&hellip;</option>
    <option value="basic">$100 Basic Package 3 Months</option>
    <option value="upgraded">$500 Upgraded Package 6 Months</option>
    <option value="expert">$1000 Expert Package 12 Months</option>
</select> 

现在您需要缓存样式化的div，并将一些子元素附加到div中

// Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');

    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());

    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            html: $this.children('option').eq(i).text()
            .split(' ').join(' <span style="color: red; font-weight:100;">'),
                rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    // Cache the list items
    var $listItems = $list.children('li');

//缓存已设置样式的div
var$styledSelect=$this.next（'div.styledSelect'）；
//在样式化的div中显示第一个select选项
$styledSelect.text（$this.children（'option'）.eq（0.text（））；
//在样式化div之后插入无序列表，并缓存该列表
var$list=$（“
”{
“类”：“选项”
}).insertAfter（$styledSelect）；
//为每个选择选项在无序列表中插入一个列表项
对于（var i=0；i”{
html:$this.children（'option'）.eq（i）.text（）
.分割（''）.连接（''），
rel:$this.children（'option'）.eq（i）.val（）
}).附件（$清单）；
}
//缓存列表项
var$listItems=$list.children（'li'）；

---

您需要使用

for循环

将样式附加到下拉列表的某些部分

您不能在

选项

标记中包含子元素。

// Cache the styled div
    var $styledSelect = $this.next('div.styledSelect');

    // Show the first select option in the styled div
    $styledSelect.text($this.children('option').eq(0).text());

    // Insert an unordered list after the styled div and also cache the list
    var $list = $('<ul />', {
        'class': 'options'
    }).insertAfter($styledSelect);

    // Insert a list item into the unordered list for each select option
    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            html: $this.children('option').eq(i).text()
            .split(' ').join(' <span style="color: red; font-weight:100;">'),
                rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    // Cache the list items
    var $listItems = $list.children('li');