用js隐藏选择文本答案

【问题标题】：Hiding select text with js用js隐藏选择文本
【发布时间】：2012-02-28 07:08:20
【问题描述】：

我有一个如下所示的选择选项。这些值是动态创建的。有没有办法使用 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>

提前致谢

【问题讨论】：

“隐藏”是什么意思？如果有人确实查看了代码的源代码，您的意思是隐藏它们吗？
为什么要通过js来做呢？为什么不从服务器端渲染你想要的方式？

标签： javascript jquery select hide

【解决方案1】：

这里有一个非常简洁的方法来满足你的需要：jsFiddle

jQuery:

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

【讨论】：

这对我来说只需要一点时间。但感谢您为我指明了正确的方向。干杯

【解决方案2】：

为 Select 分配一个 ID，然后在 Script 块中分配以下内容：

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

编辑：如您所见，我所做的是在每个选项项中查找空格，然后在找到空格的位置剪切字符串。它会使“请选择”变为“请”，但您会有所偏差。

祝你好运！

【讨论】：

这不是犹太洁食。只有在价格之前选择一个单词文本时，它只有效。 span>
计划不是为他做家庭作业/工作，而是让他得到恕我直言的想法。