콤보 상자 연결(JQuery 선호)

StackOverflow https://stackoverflow.com/questions/48993

문제

HTML을 변환하는 JQuery 플러그인을 사용해 본 경험이 있는 사람이 있는지 궁금합니다. 

<select> 
  <option> Blah </option> 
</select>

콤보 상자를 무언가(아마도 div)로 변환하여 항목을 선택하는 것은 링크를 클릭하는 것과 동일하게 작동합니다.

아마도 자바스크립트를 사용하여 선택 이벤트를 처리할 수 있을 것 같습니다(제 자바스크립트 지식은 현재 약간 파손 상태입니다). 콤보 상자의 값을 '전환'할 수 있지만 이는 해킹에 더 가깝습니다.

귀하의 조언, 경험 및 권장 사항에 감사드립니다.

도움이 되었습니까?

해결책

간단한 해결책은 다음을 사용하는 것입니다.

$("#mySelect").change(function() {
  document.location = this.value;
});

그러면 선택한 옵션의 값 필드에 저장된 URL로 리디렉션되는 선택 상자에 onchange 이벤트가 생성됩니다.

다른 팁

Div를 클릭할 때 어디로 연결하고 싶은지 잘 모르겠지만 다음과 같이 하면 아마도 작동할 것입니다.

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</options>
</select>
<div id="myDiv"/>

다음 JQuery는 다음 목록을 생성합니다. <div> 요소의 경우 옵션 값에 따라 URL로 이동합니다.

$("#mySelect option").each(function() {
    $("<div>" + $(this).text() + "</div>").appendTo($("#myDiv")).bind("click", $(this).val(), function(event) {
        location.href = "goto.php?id=" + event.data;
    });
});
$("#mySelect").remove();

이것이 당신이 원하는 일을 합니까?

독립적으로 정의할 필요 없이 리디렉션으로 사용하도록 허용하려는 선택 상자가 많이 있는 경우 다음과 유사한 방법을 시도해 보십시오. 

$("[id*='COMMON_NAME']").change(function() {
    document.location = this.value;
});

그리고 그에 따라 선택 상자의 이름을 지정하십시오.

<select id="COMMON_NAME_001">...</select>
<select id="COMMON_NAME_002">...</select>

이렇게 하면 "COMMON_NAME"을 포함하는 모든 ID에 대한 onchange 이벤트가 생성되어 <option> 값.

'select'에 있는 자바스크립트 비트는 다음과 같습니다.

onchange="if(this.options[this.selectedIndex].value!=''){this.form.submit()}"

이상적이지는 않지만(제가 사용하고 있는 ASP.NET MVC의 양식 제출이 URL에 대한 라우팅 엔진을 사용하지 않는 것처럼 보이기 때문에) 제 역할을 합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top