CUstom选择选项框仅显示选项的一部分

Question

我有一个默认选择选项，但我想要的是获取选择选项的特定部分。

在这个选项的代码中我有数字和文本，但我想要的是在选择选项后只获得一次数字。

<select name="" id="">
<option><i>1</i> Public</option>
<option><i>2</i> Private</option>
<option><i>3</i> Only Me</option>
</select>

Answer 1

尝试这样的事情。

"<i>1</i> Public".match(/\d+/)

示例

$("#test").change(function(){
    alert($(this).val().match(/\d+/));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="test">
<option><i>1</i> Public</option>
<option><i>2</i> Private</option>
<option><i>3</i> Only Me</option>
</select>

<强>更新

$(document).ready(function () {
    $(".options").hide();
    $(".header").click(function () {
        console.log("in");
        $(".options").show();
    });
    $(".options li").click(function () {
        console.log($(this));
        console.log($(this).text());
        $(".header").text($(this).text().match(/\d+/));
        $(".options").hide();
    });
});

.header {
    border: 1px solid black;
    border-radius: 7px;
    padding-left: 10px;
    width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"> <i>1</i>
</div>
<div class="options">
    <li><i>1</i> Public</li>
    <li><i>2</i> Private</li>
    <li><i>3</i> Only Me</li>
</div>

您可以修改div样式，使其看起来像选择框。