用js隐藏选择的文本

时间:2012-02-06 19:56:42

标签: javascript jquery select hide

我有一个如下选择选项。值是动态创建的。有没有办法使用js / jquery隐藏价格?

请记住我无法访问文本,因此我无法在跨度中包装价格并设置display:none

<label for="input_1_33">Condition</label>
<select tabindex="2" name="input_33">
<option value="Please Select|" price="">Please Select</option>
<option value="Poor|-5" price="-£ 5.00">Poor -£ 5.00</option>
<option value="Average|0" price="">Average</option>
<option value="Good|5" price="+£ 5.00">Good +£ 5.00</option>
<option value="Excellent|10" price="+£ 10.00">Excellent +£ 10.00</option>
</select>

所以它看起来像这样:

<label for="input_1_33">Condition</label>
<select tabindex="2" name="input_33">
<option value="Please Select|" price="">Please Select</option>
<option value="Poor|-5" price="-£ 5.00">Poor</option>
<option value="Average|0" price="">Average</option>
<option value="Good|5" price="+£ 5.00">Good</option>
<option value="Excellent|10" price="+£ 10.00">Excellent</option>
</select>

提前致谢

2 个答案:

答案 0 :(得分:3)

这是一种超简洁的方式来满足您的需求: jsFiddle

jQuery的:

$('select[name="input_33"] option:gt(0)').each(function(){
    $(this).text( ($(this).text().split(' ')[0]) );
});

答案 1 :(得分:0)

在“脚本”块中为“选择”和“后续”分配ID:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#input_33").each(function () {
            $('option', this).each(function () {
                var option = this;
                var space = option.text.indexOf(" ");
                if (space > -1) {
                    option.text = option.text.substring(0,space);
                }

            })

        });
    });
</script>

编辑:你可以看到我做的是在每个选项中找到空格,然后在找到空格的地方剪切字符串。这将使“请选择”显示为“请”,但是你会得到漂移。

祝你好运!