Javascript 使用jQuery从多个Select控件填充数据

任何时候一个人被处决，我都会通知把他关起来的法官

最近，我们发现有一个问题，人们放下了错误的刽子手。这通常不是什么大不了的事，但有些老板有大家庭，这会让执行死刑的人生活困难

因此，表单现在需要修改，以包括发送给刽子手的电子邮件

以下是该网页的基本内容：

<form method="post">
Person Executed:
<input type="text" name="_jp2code_killed" value="" size="30" />
<br />
<input type="hidden" name="_jp2code_name_original_value" id="_jp2code_name_original_value" value="Web Master" />
<input type="hidden" name="_jp2code_mail_original_value" id="_jp2code_mail_original_value" value="no-reply@jp2code.net" /><br />
Judge:
<select name="Judge" id="Judge">
    <option value="Neal Barton" _jp2code_judge="NBarton@ketknbc.com">Neal Barton</option>
    <option value="Howard Pain" _jp2code_judge="hpain@courtcircuit1.us">Howard Pain</option>
</select>
Executioner:
<select name="Executioner" id="Executioner">
    <option value="Joe Byrd" _jp2code_executioner="jbyrd@walls.tx.us">Joe Byrd</option>
    <option value="Jim Estelle" _jp2code_executioner="jestelle@tdcj.org">Jim Estelle</option>
</select>
<br />
<input type="submit" value="Submit" />
<br />
debug:
<input type="text" name="_jp2code_debug" id="_jp2code_debug" size="30" /><br />
</form>

因此，尽管我尽了最大的努力，但有两件事没有奏效：

我的调试框，应该得到的人的姓名和电子邮件地址是不工作的。这些调试框应始终至少包含Web主机名和电子邮件地址，然后在选择时附加此人的姓名和地址。我似乎无法克服这一点

一旦这是工作，我将如何添加逻辑功能，然后我需要从选择框中包括两个名称和两个电子邮件地址

这就是我一直在摆弄的地方：

我解决了它

JS小提琴：

我使用“Web Master”或HTML的默认电子邮件地址为我的元素添加了一个自定义属性：

<form method="post">
Person Executed: <input type="text" name="_jp2code_killed" value="" size="30"/>
<br/>
<input type="hidden" name="_jp2code_name_original_value" id="_jp2code_name_original_value" _jp2code_name_original_value="Web Master" />
<input type="hidden" name="_jp2code_mail_original_value" id="_jp2code_mail_original_value" _jp2code_mail_original_value="norsvp@mail.com" /><br/>
Judge:
<select name="Judge" id="Judge">
    <option value="First1 Judge1" _jp2code_judge="judge1@mail.com">First1 Judge1</option>
    <option value="First2 Judge2" _jp2code_judge="judge2@mail.com">First2 Judge2</option>
</select>
Executioner:
<select name="Executioner" id="Executioner">
    <option value="First1 Exec1" _jp2code_executioner="exec1@mail.com">First1 Exec1</option>
    <option value="First2 Exec2" _jp2code_executioner="exec2@mail.com">First2 Exec2</option>
</select>
<br/>
<input type="submit" value="Submit" />
<br/>
debug: <input type="text" name="_jp2code_debug_name" id="_jp2code_debug_name" size="50" /><br/>
debug: <input type="text" name="_jp2code_debug_emal" id="_jp2code_debug_emal" size="50" /><br/>
</form>

---

这可能对每个人都没有帮助，但如果其他人也有同样的问题，我喜欢发布解决方案。

这是因为你有一个错误

。每个

都是冗余的，

.Val

应该是

.Val

。“调试”字段现在应该显示文本，但我不确定在出现

未定义
的地方您想要什么…类似这样的内容？@Colandus-您是否使用在出现错误时弹出通知的内容？我做jQuery最困难的部分是因为我只需要用一个愚蠢的文本编辑器来编写它。@AbrahamUribe，这就是我试图开始的地方。检查。现在，我如何在“Web Master”和“Judge”旁边的文本字段中获取“Executioner”？@jp2code只需打开控制台并注意错误。
<form method="post">
Person Executed: <input type="text" name="_jp2code_killed" value="" size="30"/>
<br/>
<input type="hidden" name="_jp2code_name_original_value" id="_jp2code_name_original_value" _jp2code_name_original_value="Web Master" />
<input type="hidden" name="_jp2code_mail_original_value" id="_jp2code_mail_original_value" _jp2code_mail_original_value="norsvp@mail.com" /><br/>
Judge:
<select name="Judge" id="Judge">
    <option value="First1 Judge1" _jp2code_judge="judge1@mail.com">First1 Judge1</option>
    <option value="First2 Judge2" _jp2code_judge="judge2@mail.com">First2 Judge2</option>
</select>
Executioner:
<select name="Executioner" id="Executioner">
    <option value="First1 Exec1" _jp2code_executioner="exec1@mail.com">First1 Exec1</option>
    <option value="First2 Exec2" _jp2code_executioner="exec2@mail.com">First2 Exec2</option>
</select>
<br/>
<input type="submit" value="Submit" />
<br/>
debug: <input type="text" name="_jp2code_debug_name" id="_jp2code_debug_name" size="50" /><br/>
debug: <input type="text" name="_jp2code_debug_emal" id="_jp2code_debug_emal" size="50" /><br/>
</form>

$(function() {
  function jp2code_get_data() {
    var obj1 = $('#_jp2code_name_original_value');
    var val1 = obj1.attr('_jp2code_name_original_value');
    val1 += ','+$('#Judge').children(':selected').val();
    val1 += ','+$('#Executioner').children(':selected').val();
    var obj2 = $('#_jp2code_mail_original_value');
    var val2 = obj2.attr('_jp2code_mail_original_value');
    val2 += ','+$('#Judge').children(':selected').attr('_jp2code_judge');
    val2 += ','+$('#Executioner').children(':selected').attr('_jp2code_executioner');
    obj1.val(val1);
    obj2.val(val2);
    $('#_jp2code_debug_name').val(obj1.val());
    $('#_jp2code_debug_emal').val(obj2.val());
  }
  $('#Judge, #Executioner').each(function () {
    $(this).change(jp2code_get_data);
  });
  jp2code_get_data();
});