Question

我的html页面中有一个自由文本字段，但是我想用给定的字符串填充它。假设我有一个字符串，“苹果”，“香蕉”和“菠萝”，现在我想有一个“添加内容”按钮，可以打开一个模式框，或者如果更简单地将一个列表嵌入到我的页面中，给我一个列表，我可以在其中选择多个项目，并为每个选定的项目输入数量，然后将选定的字符串添加到我的文本字段中。例如“ 3 x苹果，2 x菠萝”

我真的很感谢任何提示，因为我不知道如何在javascript / html中解决此问题

基本上是购物车，但是我找不到简单的东西。

Answer 1

尝试一下：

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>

每个项目的带有数量选项的多选列表

1 个答案: