Question

我无法理解这个想法，想知道有人可以帮帮忙吗？

我有一个包含12个选项的表单，默认选择选项“1”。有一个隐藏的字段填充了相应的值。

我想要实现的是：当选择选项1时，隐藏文本字段的值将更新为“Opt1”，依此类推至“Opt12”

我希望以下内容正确呈现为XHTML

我可以解释的最佳方式如下：

    <select name="somethingName" id="SomethingID">
<option value="1" selected="selected">Option #1</option>
<option value="2ABC">Option #2</option>
<option value="3ABC">Option #3</option>
<option value="4ABC">Option #4</option>
<option value="5ABC">Option #5</option>
<option value="6ABC">Option #6</option>
<option value="7ABC">Option #7</option>
<option value="8ABC">Option #8</option>
<option value="9ABC">Option #9</option>
<option value="10ABC">Option #10</option>
<option value="11ABC">Option #11</option>
<option value="12ABC">Option #12</option>
</select>

<input type='hidden' id='myhidden' value=''>

如果/当选择选项＃1时，myHidden的值等于“Opt1” 如果/选择选项＃2时，myHidden的值等于“Opt2”

等等。我说if / when的想法是隐藏文本字段在select上更新。

有人可以建议我如何用Jquery实现这个目标吗？

Answer 1

以下是您可以这样做的方法：

使用.change(handler)绑定select元素的change事件。 “handler”是一个在触发change事件时将被调用的函数。
使用:selected选择器获取所选的选项元素。
使用不带参数的.index()时，它会返回匹配元素相对于其兄弟节点的索引。因此，当您获得所选的选项元素时，它将相对于其他选项元素返回其索引。这意味着您的选项当然是排序的。返回的索引从零开始。
使用.val()设置隐藏字段的值。
要在预选选项时直接应用更改，请使用.change()（无参数）触发更改事件。

以下是代码：

var $select = $('#SomethingID'),
    $hidden = $('#myhidden');

$select.change(function(e) {
    var idx = $select.find('option:selected').index() + 1;
    $hidden.va('Opt' + idx);
}).change();

<强> DEMO

因此，如果要在隐藏字段中设置的实际值不是基于选项元素的索引，而是基于随机值，则最好选择使用数据属性。这样，您可以存储在每个选项元素上设置的相应值：

<select name="somethingName" id="SomethingID">
    <option value="1" data-val="QBQ" selected="selected">Option #1</option>
    <option value="2ABC" data-val="ALA">Option #2</option>
    <option value="3ABC" data-val="OLP">Option #3</option>
</select>

要获取数据属性的值，请使用.data()方法：

var $select = $('#SomethingID'),
    $hidden = $('#myhidden');

$select.change(function(e) {
    var val = $select.find('option:selected').data('val');
    $hidden.va(val);
}).change();

<强> DEMO

表单：Jquery：多个选项，用于更新具有多个相应值的相关隐藏字段

1 个答案: