Question

我正在尝试填充表单选项值，如果它的属性 quantity 等于零。我的目标是将消息添加到当前选项值

我的HTML是：

<select class="valid">
    <option disabled="disabled" selected="selected" value="">Select Bar</option>
    <option value="1" quantity="99">value 1 </option>
    <option value="2" quantity="0">value 2  </option>
</select>

到目前为止，我已经在jQuery中尝试了以下内容，但它无效：

if($(this).attr('quantity') == '0') {
    $(this).append('<span>message</span>');
}

Answer 1

如果您不关心保留原始邮件，则可以简单地说$(this).text("message")。省略<span>，因为它无论如何都无法在<option>元素内呈现。

if($(this).attr('quantity') == '0') {
    $(this).text('message');
}

如果要保留原始邮件，可以选择几种方法。一个只是将新消息附加到原始消息，但是，稍后删除它可能会变得棘手，因此我建议使用某种分隔符，以便您可以轻松识别原始消息和附加消息，如下所示：

var $option = $(this);
if($option.attr('quantity') == '0') {
    $option.text($option.text().trim() + ' (message)');
}

然后，要删除该消息，您可以执行以下操作：

$option.text($option.text().slice(0, $option.text().indexOf('(')).trim());

Answer 2

您可以像这样填充valgrind，

option

JSFIDDLE

Answer 3

我不完全确定你要从你的问题中实现什么，但是你不能将html元素添加到选项元素中。但是，您可以按如下方式更改文本：

$(document).on('change', '.valid', function(){
    var selected = $('.valid > option:selected');
    if(selected.attr('quantity') == '0'){
        selected.text('something else');
    } 
});

如果你想附加一个错误，可以使用jQuery append（）或与原始值连接。或者，如果您希望它在选择框之外作为验证，您可以通过替换if语句中的行来简单地分配div的值。

Answer 4

<select class="valid" onchange="quality(this.options[this.selectedIndex].getAttribute('quantity'));">
    <option disabled="disabled" selected="selected" value="">Select Bar</option>
    <option value="1" quantity="99">value 1 </option>
    <option value="2" quantity="0">value 2  </option>
</select>
<span id="msg"></span>

<script type="text/javascript">
function quality(val) {
    if(parseInt(val) == 0){
        document.getElementById("msg").innerHTML = "Message";
    }
}

如何使用jQuery填充选项值？

4 个答案: