HTML 다중 선택 상자

HTML 다중 선택 상자

---

아래 양식의 이름이 무엇인지 궁금합니다. HTML 양식 목록을 위해 아침부터 인터넷 검색을했지만 어디서나 이런 종류의 양식을 찾을 수 없었습니다. 누구든지이 양식의 정확한 이름을 말해 줄 수 있으며 HTML 양식에서 사용할 수 있습니까?

웹 사이트에 이런 종류의 양식을 추가하고 싶습니다. HTML에서 사용할 수 있습니까? 아니면 JavaScript를 사용해야합니까, 아니면 Windows 응용 프로그램에만 제한되어 있습니까?

---

다음은 시작하는 데 도움이되는 간단한 샘플입니다. http://jsfiddle.net/eUDRV/3/

이 예제는 항목 (하나 또는 여러 개)을 왼쪽에서 오른쪽으로 다시 뒤로 이동합니다. 오른쪽에서 선택한 항목은 오른쪽의 텍스트 상자를 업데이트합니다.

우리는 요소를 사용하고 있습니다 :

• select
• input type="button"
• input type="text"

액자 :

• div
• section

간단한 CSS로 스타일링되었습니다. JavaScript로 기능이 제공됩니다.

좀 더 쉽게 만들기 위해 jQuery 라이브러리를 사용하고 있습니다. 이것은 순수한 JavaScript로도 가능합니다.

$("#btnLeft").click(function () {
    var selectedItem = $("#rightValues option:selected");
    $("#leftValues").append(selectedItem);
});

$("#btnRight").click(function () {
    var selectedItem = $("#leftValues option:selected");
    $("#rightValues").append(selectedItem);
});

$("#rightValues").change(function () {
    var selectedItem = $("#rightValues option:selected");
    $("#txtRight").val(selectedItem.text());
});

SELECT, INPUT[type="text"] {
    width: 160px;
    box-sizing: border-box;
}
SECTION {
    padding: 8px;
    background-color: #f0f0f0;
    overflow: auto;
}
SECTION > DIV {
    float: left;
    padding: 4px;
}
SECTION > DIV + DIV {
    width: 40px;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="container">
    <div>
        <select id="leftValues" size="5" multiple></select>
    </div>
    <div>
        <input type="button" id="btnLeft" value="&lt;&lt;" />
        <input type="button" id="btnRight" value="&gt;&gt;" />
    </div>
    <div>
        <select id="rightValues" size="4" multiple>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
        <div>
            <input type="text" id="txtRight" />
        </div>
    </div>
</section>

---

가장 일반적으로 목록 상자 다중 선택이라고합니다. 다음은 loudev.com 의 경량 jQuery 다중 선택 라이브러리입니다 .

참고 URL : https://stackoverflow.com/questions/15696415/html-multiple-select-box