Question

＆＃13;

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

＆＃13;

.lbl_txt{
background-color:green;
}

＆＃13;

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

＆＃13;

我有一个脚本可以为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);          
});

My Div：

<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

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

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

就像这样，不仅仅从输入，选项中获取值，我知道也许你可以获得div的值但是这样。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

更新

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

Answer 2

请检查并将此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>

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

2 个答案: