添加选择选项并验证它答案

【问题标题】：Add select option and validate it添加选择选项并验证它
【发布时间】：2014-01-01 07:32:19
【问题描述】：

我有一个我自己解决不了的难题。

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

    <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 个选项中的一个，并使第一个（“选择”）不可选择但首先显示。我想我必须验证表单，但我不想使用插件。

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

【问题讨论】：

试试if(!$('#product_configure_variants').val()){alert('select!!!')}
您的 id 属性中有 #，您应该删除它们。
@Milanzor：这是一个错字...现在已修复！
我想这会让你上路：stackoverflow.com/questions/5426387/…
请注意， disabled 属性已经为您提供了您想要的，您所要做的就是从其他选项中删除选定的属性：jsfiddle.net/P4DHL/1

标签： jquery validation select

【解决方案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/

【讨论】：

好的，谢谢你帮了大忙！现在唯一不起作用的是选择框不会更改为所选选项并保持“选择一个”为选中状态......如何在您的代码中解决这个问题？我尝试了更改功能，但不起作用
我将您的问题解释为您有一个系统（框架/cms），当您填写新项目时，您希望 javascript 运行，而在编辑项目时您不需要它跑步。我对么？如果是这种情况，那么我建议在 DOM 中搜索一个类，它可以让您确定该项目是否是新的。即：。在该课程中，您有多种选择。您可以将代码包装在一个简单的逻辑语句中。 if ($('body.create-new').length) { /* .. code here .. */ } 或者您可以将 body.create 添加到选择器的开头。