如何使用 JavaScript\JQuery 将隐藏输入标签的值设置为 select 标签的 selected 选项的值？

Question

我是 JavaScript 和 JQuery 的新手，我遇到了以下问题。

进入 JSP 页面我有一些 HTML 代码如下：

<form id="treeForm" method="post" action="http://localhost:7001/web/guest/link?p_auth=2QCM0Vgs&p_p_id=KMCountryArea_WAR_KMPortlets&p_p_lifecycle=1&p_p_state=normal&p_p_mode=view&p_p_col_id=column-4&p_p_col_count=1&_KMCountryArea_WAR_KMPortlets_templateDir=template&_KMCountryArea_WAR_KMPortlets_theme=css_xhtml&_KMCountryArea_WAR_KMPortlets_dynamicAttributes=%7B%7D&_KMCountryArea_WAR_KMPortlets_id=treeForm&_KMCountryArea_WAR_KMPortlets_struts.portlet.action=%2FkmCountryArea%2FkmCountryArea%2FsaveEventAttach&_KMCountryArea_WAR_KMPortlets_struts.portlet.mode=view" name="treeForm">
    <input id="folderId" type="hidden" value="" name="idFolder">

    ...............................................................
    ...............................................................
    ...............................................................

    <select id="treeForm_yourFolder" name="yourFolder">
        <option value="-1">Selezionare una Folder</option>
        <option value="CAMEX">CAMEX</option>
        <option value="NORTH AMERICA">NORTH AMERICA</option>
        <option value="BRAZIL">BRAZIL</option>
        <option value="CHILE NEW ANDEAN">CHILE NEW ANDEAN</option>
        <option value="IBERIA">IBERIA</option>
        <option value="ITALY_EUROPE">ITALY_EUROPE</option>
    </select>

    ...............................................................
    ...............................................................
    ...............................................................
</s:form>

因此，正如您在前面的代码片段中看到的那样，用户可以从 <select> 呈现的下拉菜单中 select 一个值（由 <option> 值表示） ] 标签。

而且，在前面的代码中有一个 隐藏输入字段 ，其中有 id="folderId".

所以现在我需要做的是以下操作：当用户 select 从 <select> 标签呈现的菜单中选择一个 Javascript\JQuery 脚本设置值具有 selected 选项值的隐藏输入标签 (id="folderId")。

我该怎么做？

Answer 1

试试这个

$("#folderId").val($("#treeForm_yourFolder :selected").val());

或

$("#treeForm_yourFolder").on("change",function(){
          $("#folderId").val($("#treeForm_yourFolder :selected").val());
});

Answer 2

您需要侦听对 select 的更改，并在更改时将更改的值分配给隐藏元素：

$(function(){
    $('#treeForm_yourFolder').change(function(){
        var element = $(this);
        $('#folderId').val($(element).val());
    });
});

Fiddle：http://jsfiddle.net/8tbtawut - 使用检查器 (F12) 查看隐藏输入的变化。

Answer 3

您不需要在事件函数中查询 select 列表。您可以简单地使用 this 关键字来引用 select 列表。

$("#treeForm_yourFolder").on("change",function(){
              $("#folderId").val($(this).val());
    });

如何使用 JavaScript\JQuery 将隐藏输入标签的值设置为 select 标签的 selected 选项的值？

How can I set the value of an hidden input tag with the value of the selected option of a select tag using JavaScript\JQuery?

html

javascript

xhtml

jquery

jquery-events