如何將這些標籤放在div邊框內？

Question

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