Question

我有以下链接，点击它时，它正确地将onclick事件中存储的html添加到页面中。

链接：

<a class="button small secondary add_confirmation_button" href="#" onclick="add_fields(this, &quot;confirmations&quot;, &quot;<div class=\&quot;fields\&quot;>\n  <fieldset>\n    <legend>Confirmation<\/legend>\n    <div class=\&quot;row\&quot;>\n      <div class=\&quot;medium-6 columns\&quot;>\n        <div class=\&quot;input select optional confirmation_builder_confirmations_responder_id\&quot;><label class=\&quot;select optional\&quot; for=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_responder_id\&quot;>Responder<\/label><select class=\&quot;select optional\&quot; name=\&quot;confirmation_builder[confirmations_attributes][new_confirmations][responder_id]\&quot; id=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_responder_id\&quot;><option value=\&quot;\&quot;>Select Responder<\/option>\n        <option value=\&quot;1\&quot;>Suncoast Credit Union<\/option>\n        <option value=\&quot;2\&quot;>State Street Bank and Trust Company<\/option>\n        <option value=\&quot;3\&quot;>AuburnBank<\/option>\n        <option value=\&quot;4\&quot;>Robertson Banking Company<\/option>\n        <option value=\&quot;5\&quot;>Phenix-Girard Bank<\/option>\n        <option value=\&quot;select_responder\&quot;>Select a responder<\/option><\/select><\/div>\n      <\/div>\n      <div class=\&quot;medium-6 columns\&quot;>\n        <div class=\&quot;input date optional confirmation_builder_confirmations_confirm_as_of_close_on\&quot;><label class=\&quot;date optional\&quot; for=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_confirm_as_of_close_on_2i\&quot;>Confirm as of close on<\/label><select id=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_confirm_as_of_close_on_2i\&quot; name=\&quot;confirmation_builder[confirmations_attributes][new_confirmations][confirm_as_of_close_on(2i)]\&quot; class=\&quot;date optional\&quot;>\n        <option value=\&quot;1\&quot;>January<\/option>\n        <option value=\&quot;2\&quot;>February<\/option>\n        <option value=\&quot;3\&quot;>March<\/option>\n        <option value=\&quot;4\&quot;>April<\/option>\n        <option value=\&quot;5\&quot;>May<\/option>\n        <option value=\&quot;6\&quot; selected=\&quot;selected\&quot;>June<\/option>\n        <option value=\&quot;7\&quot;>July<\/option>\n        <option value=\&quot;8\&quot;>August<\/option>\n        <option value=\&quot;9\&quot;>September<\/option>\n        <option value=\&quot;10\&quot;>October<\/option>\n        <option value=\&quot;11\&quot;>November<\/option>\n        <option value=\&quot;12\&quot;>December<\/option>\n        <\/select>\n        <select id=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_confirm_as_of_close_on_3i\&quot; name=\&quot;confirmation_builder[confirmations_attributes][new_confirmations][confirm_as_of_close_on(3i)]\&quot; class=\&quot;date optional\&quot;>\n        <option value=\&quot;1\&quot;>1<\/option>\n        <option value=\&quot;2\&quot;>2<\/option>\n        <option value=\&quot;3\&quot;>3<\/option>\n        <option value=\&quot;4\&quot;>4<\/option>\n        <option value=\&quot;5\&quot;>5<\/option>\n        <option value=\&quot;6\&quot;>6<\/option>\n        <option value=\&quot;7\&quot;>7<\/option>\n        <option value=\&quot;8\&quot;>8<\/option>\n        <option value=\&quot;9\&quot;>9<\/option>\n        <option value=\&quot;10\&quot;>10<\/option>\n        <option value=\&quot;11\&quot;>11<\/option>\n        <option value=\&quot;12\&quot;>12<\/option>\n        <option value=\&quot;13\&quot;>13<\/option>\n        <option value=\&quot;14\&quot;>14<\/option>\n        <option value=\&quot;15\&quot;>15<\/option>\n        <option value=\&quot;16\&quot;>16<\/option>\n        <option value=\&quot;17\&quot;>17<\/option>\n        <option value=\&quot;18\&quot; selected=\&quot;selected\&quot;>18<\/option>\n        <option value=\&quot;19\&quot;>19<\/option>\n        <option value=\&quot;20\&quot;>20<\/option>\n        <option value=\&quot;21\&quot;>21<\/option>\n        <option value=\&quot;22\&quot;>22<\/option>\n        <option value=\&quot;23\&quot;>23<\/option>\n        <option value=\&quot;24\&quot;>24<\/option>\n        <option value=\&quot;25\&quot;>25<\/option>\n        <option value=\&quot;26\&quot;>26<\/option>\n        <option value=\&quot;27\&quot;>27<\/option>\n        <option value=\&quot;28\&quot;>28<\/option>\n        <option value=\&quot;29\&quot;>29<\/option>\n        <option value=\&quot;30\&quot;>30<\/option>\n        <option value=\&quot;31\&quot;>31<\/option>\n        <\/select>\n        <select id=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_confirm_as_of_close_on_1i\&quot; name=\&quot;confirmation_builder[confirmations_attributes][new_confirmations][confirm_as_of_close_on(1i)]\&quot; class=\&quot;date optional\&quot;>\n        <option value=\&quot;2015\&quot; selected=\&quot;selected\&quot;>2015<\/option>\n        <option value=\&quot;2014\&quot;>2014<\/option>\n        <option value=\&quot;2013\&quot;>2013<\/option>\n        <option value=\&quot;2012\&quot;>2012<\/option>\n        <option value=\&quot;2011\&quot;>2011<\/option>\n        <option value=\&quot;2010\&quot;>2010<\/option>\n        <option value=\&quot;2009\&quot;>2009<\/option>\n        <option value=\&quot;2008\&quot;>2008<\/option>\n        <option value=\&quot;2007\&quot;>2007<\/option>\n        <option value=\&quot;2006\&quot;>2006<\/option>\n        <option value=\&quot;2005\&quot;>2005<\/option>\n        <\/select>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\&quot;row\&quot;>\n      <div class=\&quot;medium-6 columns\&quot;>\n        <div class=\&quot;input select optional confirmation_builder_confirmations_client_id\&quot;><label class=\&quot;select optional\&quot; for=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_client_id\&quot;>Client<\/label><select class=\&quot;select optional\&quot; name=\&quot;confirmation_builder[confirmations_attributes][new_confirmations][client_id]\&quot; id=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_client_id\&quot;><option value=\&quot;\&quot;>Select Client<\/option>\n        <option value=\&quot;33\&quot;>A com<\/option>\n        <option value=\&quot;1\&quot;>Boars Head<\/option>\n        <option value=\&quot;34\&quot;>Bobs co<\/option>\n        <option value=\&quot;32\&quot;>Dogs<\/option>\n        <option value=\&quot;24\&quot;>Example Company<\/option>\n        <option value=\&quot;new_client\&quot;>Add a new client<\/option><\/select><\/div>\n      <\/div>\n      <div class=\&quot;medium-6 columns\&quot;>\n        <div class=\&quot;input select optional confirmation_builder_confirmations_signer_id\&quot;><label class=\&quot;select optional\&quot; for=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_signer_id\&quot;>Signer<\/label><select class=\&quot;select optional\&quot; name=\&quot;confirmation_builder[confirmations_attributes][new_confirmations][signer_id]\&quot; id=\&quot;confirmation_builder_confirmations_attributes_new_confirmations_signer_id\&quot;><option value=\&quot;\&quot;>Select Signer<\/option>\n        <option value=\&quot;1\&quot;>Michael mickson<\/option>\n        <option value=\&quot;2\&quot;>t<\/option>\n        <option value=\&quot;3\&quot;>t<\/option>\n        <option value=\&quot;4\&quot;>t<\/option>\n        <option value=\&quot;5\&quot;>t<\/option>\n        <option value=\&quot;6\&quot;>t<\/option>\n        <option value=\&quot;7\&quot;>j<\/option>\n        <option value=\&quot;8\&quot;>j<\/option>\n        <option value=\&quot;9\&quot;>j<\/option>\n        <option value=\&quot;10\&quot;>joel<\/option>\n        <option value=\&quot;11\&quot;>d<\/option>\n        <option value=\&quot;12\&quot;>d<\/option>\n        <option value=\&quot;13\&quot;>d<\/option>\n        <option value=\&quot;14\&quot;>d<\/option>\n        <option value=\&quot;15\&quot;>d<\/option>\n        <option value=\&quot;16\&quot;>t<\/option>\n        <option value=\&quot;17\&quot;>t<\/option>\n        <option value=\&quot;18\&quot;>t<\/option>\n        <option value=\&quot;19\&quot;>joel<\/option>\n        <option value=\&quot;20\&quot;>joel<\/option>\n        <option value=\&quot;21\&quot;>joel<\/option>\n        <option value=\&quot;22\&quot;>j<\/option>\n        <option value=\&quot;23\&quot;>jo<\/option>\n        <option value=\&quot;24\&quot;>Michelle <\/option>\n        <option value=\&quot;25\&quot;>j<\/option>\n        <option value=\&quot;29\&quot;>MJ<\/option>\n        <option value=\&quot;30\&quot;>MJ<\/option>\n        <option value=\&quot;31\&quot;>John<\/option>\n        <option value=\&quot;32\&quot;>d<\/option>\n        <option value=\&quot;33\&quot;>Michael<\/option>\n        <option value=\&quot;34\&quot;>Michelle<\/option>\n        <option value=\&quot;35\&quot;>j<\/option>\n        <option value=\&quot;36\&quot;>b<\/option>\n        <option value=\&quot;new_signer\&quot;>Add a new signer<\/option><\/select><\/div>\n      <\/div>\n    <\/div>\n    <fieldset>\n      <legend>Account\'s<\/legend>\n      <p>\n        <a class=\&quot;button small secondary\&quot; href=\&quot;#\&quot; onclick=\&quot;add_fields(this, &amp;quot;accounts&amp;quot;, &amp;quot;&amp;lt;div class=\\&amp;quot;fields\\&amp;quot;&amp;gt;\\n  &amp;lt;div class=\\&amp;quot;row\\&amp;quot;&amp;gt;\\n    &amp;lt;div class=\\&amp;quot;medium-4 columns\\&amp;quot;&amp;gt;\\n      &amp;lt;div class=\\&amp;quot;input string required confirmation_builder_confirmations_new_confirmations_accounts_account_id\\&amp;quot;&amp;gt;&amp;lt;label class=\\&amp;quot;string required\\&amp;quot; for=\\&amp;quot;confirmation_builder_confirmations_attributes_new_confirmations_accounts_attributes_new_accounts_account_id\\&amp;quot;&amp;gt;&amp;lt;abbr title=\\&amp;quot;required\\&amp;quot;&amp;gt;*&amp;lt;\\/abbr&amp;gt; Account Number&amp;lt;\\/label&amp;gt;&amp;lt;input class=\\&amp;quot;string required\\&amp;quot; type=\\&amp;quot;text\\&amp;quot; name=\\&amp;quot;confirmation_builder[confirmations_attributes][new_confirmations][accounts_attributes][new_accounts][account_id]\\&amp;quot; id=\\&amp;quot;confirmation_builder_confirmations_attributes_new_confirmations_accounts_attributes_new_accounts_account_id\\&amp;quot; /&amp;gt;&amp;lt;\\/div&amp;gt;\\n    &amp;lt;\\/div&amp;gt;\\n    &amp;lt;div class=\\&amp;quot;medium-4 columns\\&amp;quot;&amp;gt;\\n      &amp;lt;div class=\\&amp;quot;input select optional confirmation_builder_confirmations_new_confirmations_accounts_style\\&amp;quot;&amp;gt;&amp;lt;label class=\\&amp;quot;select optional\\&amp;quot; for=\\&amp;quot;confirmation_builder_confirmations_attributes_new_confirmations_accounts_attributes_new_accounts_style\\&amp;quot;&amp;gt;Confirmation style&amp;lt;\\/label&amp;gt;&amp;lt;select class=\\&amp;quot;select optional\\&amp;quot; name=\\&amp;quot;confirmation_builder[confirmations_attributes][new_confirmations][accounts_attributes][new_accounts][style]\\&amp;quot; id=\\&amp;quot;confirmation_builder_confirmations_attributes_new_confirmations_accounts_attributes_new_accounts_style\\&amp;quot;&amp;gt;&amp;lt;option selected=\\&amp;quot;selected\\&amp;quot; value=\\&amp;quot;liability\\&amp;quot;&amp;gt;Liability&amp;lt;\\/option&amp;gt;\\n      &amp;lt;option value=\\&amp;quot;asset\\&amp;quot;&amp;gt;Asset&amp;lt;\\/option&amp;gt;\\n      &amp;lt;option value=\\&amp;quot;line_of_credit\\&amp;quot;&amp;gt;Line of credit&amp;lt;\\/option&amp;gt;&amp;lt;\\/select&amp;gt;&amp;lt;\\/div&amp;gt;\\n    &amp;lt;\\/div&amp;gt;\\n    &amp;lt;div class=\\&amp;quot;medium-4 columns\\&amp;quot;&amp;gt;\\n      &amp;lt;label for=\\&amp;quot;Remove\\&amp;quot;&amp;gt;Remove&amp;lt;\\/label&amp;gt;&amp;lt;input type=\\&amp;quot;hidden\\&amp;quot; value=\\&amp;quot;false\\&amp;quot; name=\\&amp;quot;confirmation_builder[confirmations_attributes][new_confirmations][accounts_attributes][new_accounts][_destroy]\\&amp;quot; id=\\&amp;quot;confirmation_builder_confirmations_attributes_new_confirmations_accounts_attributes_new_accounts__destroy\\&amp;quot; /&amp;gt;&amp;lt;a class=\\&amp;quot;button tiny alert expand\\&amp;quot; href=\\&amp;quot;#\\&amp;quot; onclick=\\&amp;quot;remove_fields(this); return false;\\&amp;quot;&amp;gt;- Remove account&amp;lt;\\/a&amp;gt;\\n    &amp;lt;\\/div&amp;gt;\\n  &amp;lt;\\/div&amp;gt;\\n&amp;lt;\\/div&amp;gt;&amp;quot;); return false;\&quot;>+ Add account<\/a>\n      <\/p>\n    <\/fieldset>\n    <input type=\&quot;hidden\&quot; value=\&quot;false\&quot; name=\&quot;confirmation_builder[confirmations_attributes][new_confirmations][_destroy]\&quot; id=\&quot;confirmation_builder_confirmations_attributes_new_confirmations__destroy\&quot; /><a class=\&quot;button tiny alert expand no_bottom_margin\&quot; href=\&quot;#\&quot; onclick=\&quot;remove_fields(this); return false;\&quot;>- Remove confirmation<\/a>\n  <\/fieldset>\n<\/div>&quot;); return false;">+ Add confirmation</a>

无法弄清楚如何在onclick属性中为select选项附加一个select选项。

如何解决这个问题？

我想找到这个：

<option value=\"\">Select Client<\/option>\n

并将其替换为：

<option value=\"\">Select Client<\/option>\n<option value=\"4\">Client with id of 4<\/option>\n

另一种想法

除了我提到的查找和替换方法;我认为可能有一种方法可以将jquery转换为＆＃34;＆＃34;我可以使用典型的jquery选择器。然后，我会找到选择并附加选项，然后将其转换回原来的转义*状态。

*不确定转义是否是正确的词。

作为开发人员，我不知道如何引用字符串的当前状态是一个问题。它是逃脱的，没有转义吗？

Answer 1

而不是使用正则表达式并尝试附加到现有的onclick函数，将其保存在字符串上更容易，然后在完成后使用.prop或.attr更改onclick功能..

var before_option = "add_fields(this, &quot;confirmations&quot;,  ...";
var after_option = "... <option value=\&quot;33\&quot;>A com<\/option>\n        <option value=\&quot;1\&quot;>Boars Head<\/option>\n";

//Let's say you need to click a button to add that option
$("#click_button").click(function(){
    var options = "<option value=\&quot;\&quot;>Select Client<\/option>\n<option value=\&quot;4\&quot;>Client with id of 4<\/option>\n";
    var final_option = before_option + options +  after_option;
    $(".add_confirmation_button").prop("onclick", final_option);
});

搜索并替换Escaped HTML

1 个答案: