j render collection_select输出HTML＆lt; \ / option＆gt; \ n

Question

如何删除collection_select中显示的HTML，例如<\/option>\n，<\/select>，<\/div>');

在javascript启动之前，这是 HTML输出：

<select name="duel[duelers_attributes][1][challenge_id]" id="duel_duelers_attributes_1_challenge_id"><option value="29">Climb Mount Everst by May 20, 2017</option>
<option value="24">Run by Feb 20, 2017</option>
<option value="26">See Drive-thru Movie by Feb 20, 2017</option>
<option value="28">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17</option>
<option value="25">Bungee Jump by Feb 20, 2017</option>
<option value="27">Journal on Weekdays for 10 Days Starting Jan 20, 17</option></select>

这是javascript启动后的 HTML输出：

<select name="duel[duelers_attributes][1][challenge_id]"
  id="duel_duelers_attributes_1_challenge_id">
  $("#dropdown-no-2").html(
    "\n <option value="\&quot;\&quot;">&lt;\/option&gt;\n</option>
        <option value="\&quot;24\&quot;">Run by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;25\&quot;">Bungee Jump by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;26\&quot;">See Drive-thru Movie by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;27\&quot;">Journal on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;28\&quot;">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;29\&quot;">Climb Mount Everst by May 20, 2017&lt;\/option&gt;&lt;\/select&gt;\n&lt;\/div&gt;"
  )</option></select>

不知何故，随着更多选择，事情似乎越来越糟糕了？

_dueler_fields.html.erb

<%= f.select :user_id, options_for_select(@challengers.collect { |challenger| [challenger.id] }) %>

<%= f.select :challenge_id, options_for_select(@challenger_challenges.collect { |challenged| [challenged.full_challenge, challenged.id] }) %> ,

# The problem occurs only AFTER the javascript kicks in and replaces the above line with collection_select(:dueler...
<script>
$('#duel_duelers_attributes_1_user_id').change(function () {
    var user_id = $(this).find(":selected").val();
    var address = "<%= user_challenges_path %>/".concat(user_id);
    $.get(address, function(data) {
        $("#duel_duelers_attributes_1_challenge_id").html(data);
    });
});
</script>

路由

  get 'duels/user_challenges/:id', :to => 'duels#user_challenges', as: 'user_challenges'
  get 'duels/user_challenges/:id/:user_id', :to => 'duels#user_challenges', as: 'select'

user_challenges.js.erb

$('#dropdown-no-2').html('<%= j render partial: "user_challenges" %>') 

_user_challenges.html.erb

<%= collection_select(:dueler, :challenge_id, @challenges, :id, :full_challenge, include_blank: true, id: 'dropdown-no-2') %>

AJAX控制台输出

$('#dropdown-no-2').html('<select name=\"dueler[challenge_id]\" id=\"dueler_challenge_id\"><option value=\"\"><\/option>\n<option value=\"24\">Run by Feb 20, 2017<\/option>\n<option value=\"25\">Bungee Jump by Feb 20, 2017<\/option>\n<option value=\"26\">See Drive-thru Movie by Feb 20, 2017<\/option>\n<option value=\"27\">Journal on Weekdays for 10 Days Starting Jan 20, 17<\/option>\n<option value=\"28\">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17<\/option>\n<option value=\"29\">Climb Mount Everst by May 20, 2017<\/option><\/select>')

额外的修复

更大的目标是在current_user选择:user_id时，所选用户的挑战应出现在collection_select。

challenges_controller

def show
  @challengers = User.where(id: current_user.following_ids)
  if (params[:challenger_id]).present?
    @challenger = User.find(params[:challenger_id])
  else
    @challenger = User.find(10)
  end
  @challenger_challenges = @challenger.challenges
  @duel = Duel.new
  @duel.duelers << Dueler.new
end

duels_controller

def user_challenges
  @user = User.find(params[:user_id])
  @challenges = @user.challenges.order(:created_at)
end

def new
  @duel = Duel.new
end

duelers_controller

def new
  @dueler = dueler.new
end

duel.rb

class Duel < ActiveRecord::Base
  belongs_to :user
  belongs_to :challenge
  has_many :duelers
  accepts_nested_attributes_for :duelers, :reject_if => :all_blank, :allow_destroy => true #correct
end

Answer 1

好吧，看起来你的html没有被正确解析。尝试使用jQuery.parseHTML，然后将其附加到选择输入。

$.get(address, function(data) {
       var html = $.parseHTML( data );
       $("#duel_duelers_attributes_1_challenge_id").append(html);
});

未经测试，但请给它打击!!

Answer 2

是否可以尝试删除名称属性＆amp;测试一次。可能[]（Square Brackets）正在制造一些问题。

试试这个

 <select id="duel_duelers_attributes_1_challenge_id"><option value="29">Climb Mount Everst by May 20, 2017</option>
<option value="24">Run by Feb 20, 2017</option>
<option value="26">See Drive-thru Movie by Feb 20, 2017</option>
<option value="28">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17</option>
<option value="25">Bungee Jump by Feb 20, 2017</option>
<option value="27">Journal on Weekdays for 10 Days Starting Jan 20, 17</option></select>

或者

<select name="duel" id="duel_duelers_attributes_1_challenge_id"><option value="29">Climb Mount Everst by May 20, 2017</option>
<option value="24">Run by Feb 20, 2017</option>
<option value="26">See Drive-thru Movie by Feb 20, 2017</option>
<option value="28">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17</option>
<option value="25">Bungee Jump by Feb 20, 2017</option>
<option value="27">Journal on Weekdays for 10 Days Starting Jan 20, 17</option></select>

Answer 3

确定。根据API，我认为你的collection_select不完全正确： http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/collection_select

尝试：

<%= collection_select(:dueler, :challenge_id, Challenge.all, :id, :full_challenge %>

第一个＆＃39; dueler＆＃39;意味着它是针对object / model dueler而不是方法或属性（challenge_id），而不是 Challenge.all 用于收集OR @challenges（如果你在控制器操作中有那个）。 ：id是value，：full_challenge是label。如果您的full_challenge不包含此HTML作为字符串，那么它也不应该显示。

我希望这有帮助，可能不是正确答案，但我试图帮助你。让我知道，..

Answer 4

好的，所以我试图绕过这个，即使这样做已经太晚了。我猜测你正在尝试从另一个的更改侦听器交换select的选项。这是一个相当常见的任务，所以也许你应该寻找一个如何实现它的指南。

但是，检查jQuery文档会告诉您.html(...)函数将替换选择器标识的某些元素的内部 HTML。您可以查看this JSFiddle并验证您的JavaScript控制台，以确定这些仅您的选项，而不是select本身。

对我而言，您似乎试图通过误导的JavaScript请求替换challenge select的选项，这将返回一些JavaScript转义html！我们仍然缺少很多实际判断它所需的代码（即你的控制器动作）。如果可能是这种情况，那么当您尝试使用一段JavaScript转义select替换html中的 时，您的糟糕浏览器很可能会感到困惑。 再次定义select（或至少尝试这样做）。

如果不进一步检查任何指南并保留最大的灵活性，我建议您提出 请求返回您希望以某种JSON格式呈现挑战者的选项。这将允许您通过change侦听器中的请求替换选项。如果您坚持提供html，则应确保仅提供 options，并确保在将其传递给.html(...)之前撤消所有必要的转义。

Answer 5

user_challenges.js.erb： $('#dropdown-no-2').html('<%= render partial: "user_challenges" %>')

或者换句话说，删除转义html标签的'j'函数。

Answer 6

我建议你在html元素上使用这样的正则表达式替换。

var text=$('#duel_duelers_attributes_1_challenge_id').html();
text=text.replace(/(\\n|<(.)*>|\\"|\"\n.*\))/g,''); 
text=text.replace(/\$[^<]*/,''); 
text=text.replace(/(\n)/g,'').replace(/\\\"/g,'"').replace(/\"\)/,'').replace(/\\\//g,'/'); 
$('#duel_duelers_attributes_1_challenge_id').html(text);

console.log(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="duel[duelers_attributes][1][challenge_id]"
  id="duel_duelers_attributes_1_challenge_id">
  $("#dropdown-no-2").html(
    "\n <option value="\&quot;\&quot;">&lt;\/option&gt;\n</option>
        <option value="\&quot;24\&quot;">Run by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;25\&quot;">Bungee Jump by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;26\&quot;">See Drive-thru Movie by Feb 20, 2017&lt;\/option&gt;\n</option>
        <option value="\&quot;27\&quot;">Journal on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;28\&quot;">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option>
        <option value="\&quot;29\&quot;">Climb Mount Everst by May 20, 2017&lt;\/option&gt;&lt;\/select&gt;\n&lt;\/div&gt;"
  )</option></select>