javascript - 根据 Jquery 中的选择选项更改按钮名称 =""和表单操作

Question

您好，我有包含三个搜索条件的表单。

这些搜索条件是职位、简历、招聘顾问。根据下拉列表，字段会相应更新。根据选择值，我想更改表单上的操作以及提交按钮的名称。问题是在选项选择中添加带有连字符的值会使 jquery 无法工作。

<form method="get" name="search" action="search-job-results?">
    <select class="homepage4" name="search_for" id="search_for">
        <option value="Jobs">Jobs</option>
        <option value="Resume">Resumes</option>
        <option value="Recruitment Consultant">Recruitment Consultants</option>
    </select>
    <input type="submit" name="searchjobbutton" id="search_submit" value="Submit">
</form>

按以下方式更改表单操作

action="search-recruitment-consultant-results?"
action="search-resume-results?"
action="search-job-results?"

按钮名称(不是值或文本)如下

name="searchrecruitmentconsultantbutton"
name="searchresumebutton"
name="searchjobbutton"

我将这些相应地放入选项值

search-recruitment-consultant-results?
search-resume-results?
search-job-results?

然后使用

<select name="search_for" onchange="this.form.action=this.value;">

但是在选项值中添加连字符会使 jquery 显示/隐藏不起作用

Answer 1

尝试这段代码，看看我在选项中使用了连字符，它工作正常。

<form method="get" name="search" id="form" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for">
    <option value="Jobs">Jobs</option>
    <option value="Resume">Resumes</option>
    <option value="Recruitment-Consultant">Recruitment Consultants</option>
 </form>
  <script>
     $(document).ready(function() {
   $("#search_for").change(function(){
       if($(this).val()=='Jobs')
      {
        $("#form").attr("action",'search-job-results?');
        $("#search_submit").attr('name',"searchjobbutton");
      }
      else if($(this).val()=='Resume'){
        $("#form").attr("action",'search-resume-results?');
        $("#search_submit").attr('name',"searchresumebutton");
      }
      else if($(this).val()=='Recruitment-Consultant'){
        $("#form").attr("action",'search-recruitment-consultant-results?');
        $("#search_submit").attr('name',"searchrecruitmentconsultantbutton");
      }
    });
});
 </script>