jQuery：更改隐藏输入字段的值

Question

我在设置隐藏输入框的值时遇到了困难。

我想将选项标签之间的 HTML 传递给隐藏字段，并从WordPress的wp_list_dropdowns()获取页面标题。我成功地返回了文本内容，并且在更改事件上它正确地添加了一些 CSS（在隐藏字段上显然是不需要的，但我试图确定哪些地方出现了问题）。如果我将隐藏输入框更改为文本输入框，则可以正常工作。我在SO的几个地方看到过这种可能性（即更改隐藏输入框的值），但现在有些东西让我停滞不前，我看不到答案。

这里是JSFiddle：

JavaScript：

$(".selector").change(function() {
    var $value = $(this).val();
    var $title = $(this).children('option[value='+$value+']').html();
    alert($title); 
    $('input#bacon').val($title).css('border','3px solid blue');
});

HTML：

<select class="selector" name="testselect">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
</h3>

<input id="bacon" type="hidden" class="bacon" value="" name="testinput">

- helgatheviking

---

您的小提琴在我的火狐浏览器中可以使用。我用 Firebug 检查了一下隐藏输入的值是否有变化，并且当我选择不同的下拉框值时，它确实发生了改变。也许我没有理解问题 :-) - StefanS

对我来说运行良好：在Chrome 9中，隐藏输入框的值已更改。在哪些浏览器上无法正常工作？您使用什么方法进行验证？ - Pekka

你为什么认为它不能正常工作？你的代码似乎完全按照你的要求执行了。 - Aaron

这里有一个素食选项（仅供参考 :) - Pekka

你认为为什么它不起作用？看起来值已经被设置了：http://jsfiddle.net/S9mUL/6/ - Felix Kling

谢谢大家。你们都是对的，它确实有效。感谢我编写出可行的代码。但是，我失败了，没有看到它起作用的部分。这只表明有时候休息是最好的选择！还有笑@pekka提供素食选项。 - helgatheviking

Answer 1

就像这样简单：

$('#action').val("1");

#action 是隐藏输入字段的 ID。

- Yasir Aslam

---

在这里，val 中的双引号没有用处，但是如果您传递一个数字： $('#action').val(1); - Medhi

Answer 2

你的jQuery代码完美运行。隐藏字段正在被更新。

- alex

---

你正在阅读连载的HTML，其中 value 属性将反映其原始值。这是为什么你不应该盲目使用与 innerHTML 相关的方法之一。 - alex

Answer 3

看起来可以正常工作

$(".selector").change(function() {

    var $value = $(this).val();

    var $title = $(this).children('option[value='+$value+']').html();

    $('#bacon').val($title);

});

只需要使用Firebug进行检查。不要在隐藏的输入框上添加CSS样式。

- Santosh Linkha

---

现在似乎可以工作了。我把CSS当作一个非常粗糙的jQuery调试工具...用Firebug查看是否使用了正确的选择器。我一定需要休息。新鲜的眼睛和饱腹的胃解决了显然没有问题的问题（这次）。 - helgatheviking

Answer 4

如果您在Drupal中使用表单API在hook_form_alter中将#type从文本更改为“hidden”，请注意输出的HTML将具有不同（或省略）DIV包装器、ID和类名。

- Joe Hyde