从文本字段切换到选择字段时，javascript停止工作

我正在尝试使用javascript，但我是一个喜欢ruby的人，javascript真的很烂。我有一个单字段表单（文本字段和提交按钮），其中javascript只允许在字段中有文本时提交表单。但是，我将字段类型从文本字段切换为选择字段。现在，表单无法提交。我几乎可以肯定问题出在我的javascript上。这是代码，我有一个文本字段的单词。如何让它与select一起工作

表格：

css:

带有下拉列表的表单的Html：

<select id="resume-field" name="skill[label]">
    <option value="1" title="option_1"></option>
    <option value="2" title="option 2" selected="selected"></option>
</select>

---

您声明已将输入字段类型从文本切换为选择。因此，您需要添加这种html：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select> 

沃尔沃汽车
萨博
梅赛德斯
奥迪

首先，您的HTML有点不正确：

<form id="new_skill" class="new_skill" method="post" action="/skills" >
    <!-- needs a parent UL element -->
    <li>
        <input id="resume-field" class="field field288" type="text"
          value="Type a speciality you want to add to your profile" 
          title="Type a speciality you want to add to your profile" 
          name="skill[label]"></input>
          <!-- as a side not, input tags can be self-close (<input type="text" />)
    </li>
    <li>
        <input class="button button-add button-add-disabled" 
         type="submit" value="ADD +" name="commit"></input>
    </li>
</form>

更新和简化：

假设您确实将
元素更改为
元素，您的代码只需稍作更改即可正常工作


实际上，您只需跟踪更改事件：

HTML:

<form id="new_skill" class="new_skill" method="post" action="/skills" >
    <li>
        Select a specialty to add to your profile:<br>
        <select id="resume-field" name="skill[label]">
            <option value="default">Select a speciality:</option>
            <option value="cod3r">Programming</option>
            <option value="pizza">Pizza consumption</option>
        </select>
    </li>
    <li>
        <input class="button button-add button-add-disabled" 
         type="submit" value="ADD +" name="commit"></input>
    </li>
</form>

$(document).on('change', '#resume-field', function() {
    if(this.value=='default') {
        $(this).parents().find('.button-add').addClass('button-add-disabled');
    } else {
        $(this).parents().find('.button-add').removeClass('button-add-disabled');
    }

});     

PS：当然，为了让JSFIDLE工作，我还必须暂时从css中删除
url（）
等…
我做了一个简单的示例（），按照我认为您要求的做，但不使用您的代码。如果它符合您的要求，您可能会对其进行调整

HTML

<form>
    <select id="selectme">
        <option value="">-- Please select one --</option>
        <option value="1">1</option>
        <option value="2">Two</option>
        <option value="3">III</option>
    </select> 
    <input type="submit" value="submit" id="clickme">
</form>

CSS

$(function(){
    $("#clickme").prop("disabled", true);
    $("#selectme").change(function(){
        if ($("#selectme").val() != "") {
            $("#clickme").removeAttr("disabled");
        } else {
            $("#clickme").prop("disabled", true);
        }
    });
})

#clickme {
    background-color: #f00;
}

#clickme:disabled {
    background-color: #eee;
}

它的可能副本不是副本。我领先于他，因为我得到了一个文本字段。你能发布选择的HTML吗？如果要将文本字段转换为SELECT，可能有很多原因导致它无法工作（例如，选项元素不正确、ID不匹配等）。@Philip7899如果不是重复的，那么它至少是一个很好的例子。：）JSFIDLE也不错！苏伦德兰，我试过你的JSFIDLE，它总是提交。我想做的是让它这样，如果用户还没有选择任何东西，它不能被提交。如果用户有，那么就不能提交。我有点不好意思承认我认识这段代码，而且它是从W3学校复制的。：）是的，我只是开玩笑。外面有很多人。十年前，对于初学者来说，没有太多好的参考资料，所以我从他们那里学到了很多东西（似乎大部分都忘了）。谢谢，你的回答几乎帮了我大忙。就其提交方式而言，它是完美的。唯一的问题是，与button add和button add disabled关联的样式/颜色现在没有出现。我的意思是，当链接可单击时，以及当链接返回不可单击时，颜色应该更改。现在颜色也在更改。更改了选择框的行为一点，因为在以前的版本中，一旦选择了真实值，就不可能选择“空”值。
$(document).on('change', '#resume-field', function() {
    if(this.value=='default') {
        $(this).parents().find('.button-add').addClass('button-add-disabled');
    } else {
        $(this).parents().find('.button-add').removeClass('button-add-disabled');
    }

});     

<form>
    <select id="selectme">
        <option value="">-- Please select one --</option>
        <option value="1">1</option>
        <option value="2">Two</option>
        <option value="3">III</option>
    </select> 
    <input type="submit" value="submit" id="clickme">
</form>

$(function(){
    $("#clickme").prop("disabled", true);
    $("#selectme").change(function(){
        if ($("#selectme").val() != "") {
            $("#clickme").removeAttr("disabled");
        } else {
            $("#clickme").prop("disabled", true);
        }
    });
})

#clickme {
    background-color: #f00;
}

#clickme:disabled {
    background-color: #eee;
}