Javascript를 사용하여 다중 선택 상자에서 Ctrl- 클릭의 필요성을 피하는 방법은 무엇입니까?

Javascript를 사용하여 다중 선택 상자에서 Ctrl- 클릭의 필요성을 피하는 방법은 무엇입니까?

---

나는 이것이 간단한 해킹이라고 생각했지만 지금은 몇 시간 동안 검색해 왔으며 올바른 검색어를 찾을 수 없습니다. <select multiple="multiple">사용자가 여러 항목을 선택하기 위해 Ctrl 키를 누르고있을 필요가 없다는 점을 제외하고 는 일반 다중 선택 상자 ( )를 갖고 싶습니다.

즉, 다른 <option>요소를 변경하지 않고 커서 아래에있는 요소 를 전환하려면 왼쪽 클릭을 원합니다 . 즉, 콤보 목록 상자처럼 보이지만 확인란 그룹처럼 동작하는 것을 원합니다.

누구든지 Javascript에서 이것을 수행하는 간단한 방법을 제안 할 수 있습니까? 감사.

---

이 바이올린을 확인하십시오 : http://jsfiddle.net/xQqbR/1022/

기본적으로 mousedown각각에 대한 이벤트 를 재정의 <option>하고 selected속성을 토글해야 합니다.

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

단순함을 위해 위의 선택기로 '옵션'을 지정했습니다. <option>s특정 <select>요소 와 일치하도록 미세 조정할 수 있습니다 . 예 :$('#mymultiselect option')

---

이 문제를 직접 해결 하고 속성을 가로 채고mousedown 속성을 설정 하면 버그가있는 동작을 발견 했으므로 선택 요소를 재정의하고 잘 작동합니다.

jsFiddle : http://jsfiddle.net/51p7ocLw/

참고 : 이 코드는 DOM에서 select 요소를 대체하여 버그가있는 동작을 수정합니다. 이것은 약간 공격적이며 요소에 연결했을 수있는 이벤트 핸들러를 중단합니다.

window.onmousedown = function (e) {
    var el = e.target;
    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
        e.preventDefault();

        // toggle selection
        if (el.hasAttribute('selected')) el.removeAttribute('selected');
        else el.setAttribute('selected', '');

        // hack to correct buggy behavior
        var select = el.parentNode.cloneNode(true);
        el.parentNode.parentNode.replaceChild(select, el.parentNode);
    }
}

<h4>From</h4>

<div>
    <select name="sites-list" size="7" multiple>
        <option value="site-1">SITE</option>
        <option value="site-2" selected>SITE</option>
        <option value="site-3">SITE</option>
        <option value="site-4">SITE</option>
        <option value="site-5">SITE</option>
        <option value="site-6" selected>SITE</option>
        <option value="site-7">SITE</option>
        <option value="site-8">SITE</option>
        <option value="site-9">SITE</option>
    </select>
</div>

---

techfoobar의 대답은 버그가 있으며 마우스를 드래그하면 모든 옵션을 선택 취소합니다.

Sergio의 대답은 흥미롭지 만 드롭 다운에 바인딩 된 이벤트를 복제하고 제거하는 것은 좋지 않습니다.

이 대답을 시도하십시오 .

참고 : Firefox에서는 작동하지 않지만 Safari / Chrome / Opera에서는 완벽하게 작동합니다. (IE에서 테스트하지 않았습니다)

---

오늘도 같은 문제가 발생했습니다. 일반적으로 숨겨진 확인란 목록을 사용하고 CSS를 통해 동작을 에뮬레이션하는 것이 좋습니다.이 방법은 관리하기가 더 쉽지만 제 경우에는 html을 수정하고 싶지 않습니다.

현재이 코드는 Google 크롬에서만 테스트했지만 다른 브라우저에서 작동하는지는 모르겠지만 다음과 같아야합니다.

var changed;
$('select[multiple="multiple"]').change(function(e) {
    var select = $(this);
    var list = select.data('prevstate');
    var val = select.val();
    if (list == null) {
        list = val;
    } else if (val.length == 1) {
        val = val.pop();
        var pos = list.indexOf(val);
        if (pos == -1)
            list.push(val);
        else
            list.splice(pos, 1);
    } else {
        list = val;
    }
    select.val(list);
    select.data('prevstate', list);
    changed = true;
}).find('option').click(function() {
    if (!changed){
        $(this).parent().change();
    }
    changed = false;
});

물론 제안은 환영하지만 다른 방법을 찾지 못했습니다.

---

Necromancing.
The selected answer without jQuery.
Also, it missed setting the focus when an option is clicked, because you have to do this yourself, if you write e.preventDefault...
Forgetting to do focus would affect CSS-styling, e.g. bootstrap, etc.

var options = [].slice.call(document.querySelectorAll("option"));

options.forEach(function (element)
{
    // console.log("element", element);
    element.addEventListener("mousedown", 
        function (e)
        {
            e.preventDefault();
            element.parentElement.focus();
            this.selected = !this.selected;
            return false;
        }
        , false
    );
});

참고URL : https://stackoverflow.com/questions/8641729/how-to-avoid-the-need-for-ctrl-click-in-a-multi-select-box-using-javascript