Question

任何时候一个人被处决，我都会通知将他带走的法官。

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

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

以下是网页的基础知识：

<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>

有了这些定义，这是我想要开始工作的jQuery（v1.7）：

$(function () {
    // Save references to elements
    var objName = $('#_jp2code_name_original_value');
    if (!objName.attr('_jp2code_custom_parameter') ||
                ($.trim(objName.attr('_jp2code_custom_parameter')) == '')) {
        objName.attr('_jp2code_custom_parameter', objName.val());
    }
    var objEmail = $('#_jp2code_mail_original_value');
    if (!objEmail.attr('_jp2code_custom_parameter') ||
                ($.trim(objEmail.attr('_jp2code_custom_parameter')) == '')) {
        objEmail.attr('_jp2code_custom_parameter', objEmail.val());
    }
    $('#Judge').each(function () {
        $(this).change(function () { // Add OnChange EventHandler
            var oItem = $(this); // reference to current element
            var oName = $('#_jp2code_name_original_value'); // Save references to names
            var oEmal = $('#_jp2code_mail_original_value'); // Save references to emails
            if ($.trim(oItem.Val()) != '') {
                oName.val(oName.attr('_jp2code_mail_original_value') + ',Judge');
                oEmal.val(oEmal.attr('_jp2code_mail_original_value') + ',' + $(this).children(':selected').attr('_jp2code_judge'));
            } else {
                oName.val(oName.attr('_jp2code_mail_original_value'));
                oEmal.val(oEmal.attr('_jp2code_mail_original_value'));
            }
            $('#_jp2code_debug_name').val(oName.val());
            $('#_jp2code_debug_emal').val(oEmal.val());
        });
    });
});

所以，尽管我付出了最大的努力，但有些事情并没有奏效：

我应该获取人名和电子邮件地址的调试框无效。这些调试框应始终至少包含 Web Master 名称和电子邮件地址，然后在选择时附加此人的姓名和地址。我似乎无法超越它。
一旦有效，我将如何添加逻辑功能，然后我需要在选择框中包含这两个名称和两个电子邮件地址。

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

http://jsfiddle.net/jp2code/c5Q2V/

Answer 1

我解决了。

JS小提琴：http://jsfiddle.net/jp2code/wunC2/1/

我使用＆＃34; Web Master＆＃34;为我的元素添加了一个自定义属性。或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>

对于jQuery，我将其修剪为一个传递给两个Select控件的函数，我不得不调用该函数一次，以便预先填充数据：

$(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();
});

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

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

1 个答案: