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＃idj_tujuanのような要素なので、div.Click divをクリックしてその作業を確認するだけです。 divの値を取得しようとしていたdivの値もありませんでした。あなたはdiv要素のテキストを取得しようとしている場合は、単に入力から値を入手するには、この方法のように$('div selected').text();

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

を使用する一切、選択肢は限り私は多分あなたはおそらくのdivの値が、この方法を取得することができます知っていません。あなたはdiv要素のテキストを取得しようとした場合

だけdivの

でdivのフィット感の内側にテキストを行いますあなたのdivのCSS word-wrap: break-word;で$('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'>

更新

を使用