Question

一个简单的问题，（我假设）一个简单的解决方案，但为什么不会以下（带有重要的行的精简版）工作：

修改： 我对我的示例代码进行了一些编辑，因此可能会更清楚地说明为什么会出现错误

我仍然怀疑代码，因为它似乎很难看，而且那里有很多无用的东西，但我没有进入优化阶段

HTML：

   <div class="select-container">
   <input type="hidden" name="enroll-persons-field" id="enroll-persons-field">
   <select size="1" name="enroll-persons" id="enroll-persons" class="form-options" tabindex="7">
   <option value=""></option>
      <optgroup label="Ik boek voor">
         <option value="1" selected>1 persoon&lt;/option>
         <option value="2">2 personen&lt;/option>
         <option value="3">3 personen&lt;/option>
         <option value="4">4 personen&lt;/option>
         <option value="5">5 personen&lt;/option>
         <option value="more">meer dan 5 personen&lt;/option>
      </optgroup>
   <select>
<div>

[..]

<input type="text" name="enroll-address" id="enroll-address" class="default-input-style" placeholder="Je adres" tabindex="10" required>

现在我正在通过jQuery替换选择列表来设置选项列表的样式。我可以想象它是一个丑陋的方法，但到目前为止它的工作原理

$(".select-container").after("&lt;div class='select-list-container'>&lt;/div>");
$(".select-list-container").append("&lt;ul id='select-option-list'>");
$(".form-options option").each(function(){
   li = '&lt;li id="'+$(this).val()+'">'+$(this).attr('text')+'&lt;/li>';
   $("#select-option-list").append(li);
});
$(".select-list-container").append("&lt;/ul>");
$(".form-options").hide();
$(".select-container").text($(".form-options option:last").attr('text')).click(function(){
   $(".select-list-container").toggle("fast");
});
$("#select-option-list li").live("click", function(){
   $(".select-container").text($(this).text());
   $(".select-list-container").toggle("fast");
   $("#enroll-persons-field").val($(this).attr("id"));
});

希望这个描述会有所帮助

结果alert()给出undefined，$(this).attr('id')是合法值。我测试了它:)）

EDIT2： 通过将隐藏的输入字段放在select-container div

之外来解决它

感谢大家的帮助！

Answer 1

在您的代码中，$(this).attr('id')在文档的上下文中运行，该文档没有名为ID的属性。将其更改为$("#enroll-persons-field").attr("id")，或将结果存储在变量中并使用两次。

Answer 2

根据您发布的代码，this为document。 $(this).attr("id")相当于document.id。除非您之前在JavaScript中的某处设置了document.id，否则该值将是未定义的。

http://jsfiddle.net/DpuGh/

您需要获得对预期this的预期的引用，并使用它。

顺便说一下，$(this).attr("id")与this.id相同。在这里调用jQuery的开销毫无意义。

Answer 3

尝试更改此

$("input#enroll-persons-field").val($(this).attr('id'));

到

var text = $("input#enroll-persons-field").attr('id');
$("input#enroll-persons-field").val(text);

如果你想保留你拥有的东西，你可以随时：

var this = $("input#enroll-persons-field");

Answer 4

<input type="hidden" name="enroll-persons-field" value="myvalue" id="enroll-persons-field">

value是值，id是id。

Answer 5

简而言之

$("input#enroll-persons-field").val($(this).attr('id'));

就像gilly3指出的那样，并没有引用你想要的ID。

$("input#enroll-persons-field").val( function(){ return $(this).attr('id') });

你会做你期望的，因为这个attr（'id'）指的是你的“＃enroll-persons-field”而不是文件本身。

隐藏字段的更改值不起作用

5 个答案: