如何将这些标签放在 div 边框内？

Question

var val_tujuan = "test";
$('#d_tujuan').on('click', function(){
			var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
			
			$('#d_tujuan').append(txt_tujuan);
      });

.lbl_txt{
background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
                    <div id='fdaftar' class="form-group">
                        <label>Daftar Tujuan</label>
                        <div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px;  word-wrap: break-word;">
                        </div>
					</div>
                    </div>

我有一个向 div 添加标签的脚本。但是，问题是标签通过 div 边界？如何解决？我已经尝试了here 的解决方案，但对我没有任何作用。 （或者我可能没有在那里实施解决方案）

我的 jQuery：

$('#sel_tujuan').on('change', function(){
        var val_tujuan = $(this).val();
        var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";

        $('#d_tujuan').append(txt_tujuan);          
});

我的分区：

<div class="col-md-12">
<div id='fdaftar' class="form-group">
   <label>Daftar Tujuan</label>
   <div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px;word-wrap: break-word"></div>
</div>
</div>

Answer 1

请检查这个并将这个 css word-wrap: break-word; 给 d_tujuan id。为标签添加这个 css。

.label.lbl_txt {
 display: inline-block;
}

var val_tujuan = "test";
$('#d_tujuan').on('click', function(){
  var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";

  $('#d_tujuan').append(txt_tujuan);
});

.lbl_txt{
background-color:green;
}
.label.lbl_txt {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div id='fdaftar' class="form-group">
      <label>Daftar Tujuan</label>
      <div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px; display:block; word-wrap: break-word;">
      </div>
  </div>
</div>

Answer 2

问题是它没有以这种方式触发$('#sel_tujuan').on('change', function()，因为没有 ID 为 #sej_tujuan 的此类元素，所以我只是在单击 div 时检查其工作。单击 div 其工作。在 div 中也没有这样的值，你试图获得 div 的值。如果您尝试获取 div 的文本，请使用 $('div selected').text();

$('#sel_tujuan').on('change', function(){
        var val_tujuan = $(this).val();

像这种方式不仅仅是从输入中获取价值，据我所知的选项也许你可以通过这种方式获得 div 的价值。

如果您想获取 div 的文本，请使用 $('div selected').text();

$(document).ready(function(){
$('#d_tujuan').click(function(){
        var val_tujuan = $('input').val();
        var txt_tujuan = "<label class='lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>";
        $('#d_tujuan').append(txt_tujuan);          
});
});

#d_tujuan {
  border:#000 1px; 
  background-color:#DDD; 
  min-height:100px; 
  display:block;   
  word-wrap: break-word; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div id='fdaftar' class="form-group">
   <label>Daftar Tujuan</label>
   <div id='d_tujuan'></div>
</div>
</div>
<input value='valued'>

更新

在您的 Div css word-wrap: break-word; 将使您在 div 中的文本适合 div