多选列表，每个项目都有数量选项

Question

我的 html 页面中有一个自由文本字段，但我想用给定的字符串填充它。假设我有字符串 "apple"、"banana" 和 "pineapple"，现在我想要一个按钮 "add content" 来打开一个模式框，或者如果它更简单的话，只需一个列表嵌入在我的页面中，它为我提供了一个列表，我可以在其中 select 多个项目，并可以选择为每个 selected 项目输入数量并将 selected 字符串添加到我的文本中场地。例如“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>

多选列表，每个项目都有数量选项

multiselect list with quantity option for each item

html

javascript

web2py