我的 html 页面中有一个自由文本字段，但我想用给定的字符串填充它。假设我有字符串“apple”、“banana”和“pineapple”，现在我想要一个“添加内容”按钮来打开模式框，或者如果更简单，只需将列表嵌入到我的页面中，给我一个列表，我可以在其中选择多个项目，并可以选择输入每个选定项目的数量，并将选定的字符串添加到我的文本字段。例如“3 x 苹果，2 x 菠萝”
我真的很感激任何提示，因为我不知道如何在 javascript / html 中解决这个问题
它基本上是一个购物车，但我找不到任何简单的东西。
尝试这个：
var txt = document.getElementById( 'droptxt' ),
content = document.getElementById( 'content' ),
list = document.querySelectorAll( '.content input[type="checkbox"]' ),
quantity = document.querySelectorAll( '.quantity' );
txt.addEventListener( 'click', function() {
content.classList.toggle( 'show' )
} )
// Close the dropdown if the user clicks outside of it
window.onclick = function( e ) {
if ( !e.target.matches( '.list' ) ) {
if ( content.classList.contains( 'show' ) ) content.classList.remove( 'show' )
}
}
list.forEach( function( item, index ) {
item.addEventListener( 'click', function() {
quantity[ index ].type = ( item.checked ) ? 'number' : 'hidden';
calc()
} )
} )
quantity.forEach( function( item ) {
item.addEventListener( 'input', calc )
} )
function calc() {
for ( var i = 0, arr = []; i < list.length; i++ ) {
if ( list[ i ].checked ) arr.push( quantity[ i ].value + ' x ' + list[ i ].value )
}
txt.value = arr.join( ', ' )
}
#droptxt {
padding: 8px;
width: 300px;
cursor: pointer;
box-sizing: border-box
}
.dropdown {
position: relative;
display: inline-block
}
.content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
overflow: auto;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
z-index: 1
}
.quantity {
float: right;
width: 40px
}
.content div {
padding: 10px 15px
}
.content div:hover {
background-color: #ddd
}
.show {
display: block
}
<p>Click on the below text field:</p>
<div class="dropdown">
<input type="text" id="droptxt" class="list" readonly>
<div id="content" class="content">
<div class="list">
<input type="checkbox" id="apple" class="list" value="Apple" />
<label for="apple" class="list">Apple </label>
<input type="hidden" class="list quantity" min="1" value="1" />
</div>
<div class="list">
<input type="checkbox" id="banana" class="list" value="Banana" />
<label for="banana" class="list">Banana </label>
<input type="hidden" class="list quantity" min="1" value="1" />
</div>
<div class="list">
<input type="checkbox" id="pineapple" class="list" value="Pineapple" />
<label for="pineapple" class="list">Pineapple </label>
<input type="hidden" class="list quantity" min="1" value="1" />
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
