Question

我试图做一个下拉菜单。您必须搜索包裹编号，您将获得详细信息，以便您可以立即看到该包裹的正确价格或尺寸。

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

我做了类似的事，但你不能拆分选项。

This is what I want to achieve

Answer 1

我正在制定解决方案，但必须参加会议。这应该给你一个基本的想法。基本上，您需要使用JS来覆盖styled dropdown，它将链接到实际的下拉列表。然后你可以在每个选项中设置不同的样式。

首先创建下拉列表选择

您需要将所有文字作为单个下拉列表

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

然后你理论上，使用Javascript跳过篮球

在这里，您需要缓存选项，然后隐藏选择以显示您的样式div。

 // Cache the number of options
    var $this = $(this),
        numberOfOptions = $(this).children('option').length;

// Hides the select element
$this.addClass('s-hidden');

// Wrap the select element in a div
$this.wrap('<div class="select"></div>');

// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></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());

现在，您需要缓存样式化的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');

您需要使用for loop将样式添加到下拉列表的某些部分。的 I have a basic mock up for you to check out as well.

下拉选择扩展选项

1 个答案: