Question

我遇到了一个难以解决的问题。

我有一个动态选择框，默认情况下选择了一个选项，如下所示：

    <select id="product_configure_variants">
      <option value="8830685" selected="selected">nicotine</option>
      <option value="8831010">6mg nicotine</option>
      <option value="8831011">12mg nicotine</option>
     </select>

我在Jquery上添加了一个新选项，如下所示：

$('#product_configure_variants').prepend('<option value="" disabled="disabled" selected="">Choose</option>');

现在html看起来像这样：

    <select id="product_configure_variants">
      <option value="" selected="" disabled="disabled">Choose</option>
      <option value="8830685" selected="selected">nicotine</option>
      <option value="8831010">6mg nicotine</option>
      <option value="8831011">12mg nicotine</option>
     </select>

我想强迫人们选择3个选项中的一个，并使第一个（“选择”）不可选，但首先显示。我想我必须验证表单，但我不想使用插件。

有没有人知道如何做到这一点？

Answer 1

你可以这样做：

var option = $('<option>').text('- Chose one -');
$('#product_configure_variants').prepend(option).val('- Chose one -');

$('#my-form').submit(function(e){
    if ($('#product_configure_variants').val() == '- Chose one -') {
        e.preventDefault();
        alert('Warning! You have to select one!');
        $('#product_configure_variants').addClass('req');
    }
});

http://jsfiddle.net/9HGUp/

添加选择选项并验证它

1 个答案: