Javascript 更改按钮名称="&引用；和基于Jquery中选择选项的表单操作

嗨，我有一个包含三个搜索条件的表单

这些搜索标准包括工作、简历、招聘顾问。 根据下拉列表，相应地更新字段。 根据select值，我想更改表单上的操作以及submit按钮的名称。问题是，在选项select中使用连字符的值会使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显示/隐藏不起作用

我认为这会对您有所帮助

为表单“formId”添加id

$(document).ready(function(){
    $('#search_for').change(function(){
        var cur = $(this);
        var search = cur.val();
        if(search == 'job'){
            $('#formId').attr('action', 'search-job-results?');
            $("search_submit").attr('name', 'searchjobbutton');
        } else if(search == 'Resume'){
            $('#formId').attr('action', 'search-resume-results?');
            $("search_submit").attr('name', 'searchresumebutton');
        }else if(search == 'Recruitment Consultant'){
            $('#formId').attr('action', 'search-recruitment-consultant-results?');
            $("search_submit").attr('name', 'searchrecruitmentconsultantbutton');
        }
    });
});

试试这个

添加具有按钮名称的数据属性

只需在选择框中添加-

onchange=“$（this）.parent（）.attr（'action'，$（this）.val（））；$（'search_submit'）.val（$（this）.find（'：selected'）.data（'name'））；”

和选项中的

data name=”“

  <form method="get" name="search" action="search-job-results?">
<select class="homepage4" name="search_for" id="search_for" onchange="$(this).parent().attr('action', $(this).val()); $('#search_submit').val($(this).find(':selected').data('name'));">
    <option value="search-job-results?" data-name="searchjobbutton">Jobs</option>
    <option value="search-resume-results?" data-name="searchresumebutton">Resumes</option>
    <option value="search-recruitment-consultant-results?" data-name="searchrecruitmentconsultantbutton">Recruitment Consultants</option>
</select>
<input type="submit" name="searchjobbutton" id="search_submit" value="Submit">

乔布斯
恢复
招聘顾问

乔布斯
恢复
招聘顾问

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

<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>

乔布斯
恢复
招聘顾问
$（文档）.ready（函数（）{
$（“#搜索”）.change（函数（）{
if（$（this）.val（）=='Jobs'）
{
$（“#表单”）.attr（“操作”，“搜索工作结果”）；
$（“#搜索_提交”）.attr（'name'，“searchjobbutton”）；
}
else if（$（this）.val（）=='Resume'）{
$（“#表单”）.attr（“操作”，“搜索-恢复-结果”）；
$（“#搜索_提交”）.attr（'name'，“searchresumebutton”）；
}
else if（$（this）.val（）=='Recruption-Consultant'）{
$（“表格”）.attr（“行动”，“搜索-招聘-咨询-结果”）；
$（“#搜索_提交”）.attr（'name'，“SearchRecruptimentConsultantButton”）；
}
});
});

不要编写多个表单，只需编写一个表单并使用用于创建自定义标记的and属性即可。将按钮名称存储在

中，然后您可以在更改时访问此值

data-*属性用于存储页面或应用程序专用的自定义数据

.change（） 将事件处理程序绑定到“更改”JavaScript事件，或在元素上触发该事件

$（'search#u for'）。关于（'change'，函数（）{
$（'form[name=“search”]'）.attr（'action'，$（this）.val（））.find（'：submit'）.attr（'name'，$（this）.find（'：selected'）.data（'name'））；
});

乔布斯
恢复
招聘顾问
为什么要更改输入的名称？为什么不根据选择值显示/隐藏三个输入？--使用
addEventListener（'change'）…
和
setAttribute（'name'…
我可以这样做，谢谢你指出，也许我可以在show/hide下嵌套三个表单，这样可以解决问题。让我试试看，你迄今为止尝试了哪些javascript？你能把它添加到问题中吗？我还建议不要将JS放在HTML属性中，比如
onchange
@evolutionxbox-your-original提示将整个表单放入带有按钮的show/hide div中解决了问题…有时答案是如此明显！！！！