JQuery .change 태그로 어려움을 겪고있는 초보자

HTML을 잘 알고 있기 때문에 JQuery를 배우려고합니다. JQuery site에서 .change 기능을 찾았습니다.JQuery .change 태그로 어려움을 겪고있는 초보자

이상적으로는 test1과 test2만이 서로에게 영향을주고 test3과 test4는 서로에게 영향을주고 싶습니다.

는 지금 TEST2 및 TEST4은 TEST1 및 TEST3 모두에 영향을

여기 내 코드입니다 :

<select id="test1" name="sweets" multiple="multiple"> 
<option>Chocolate</option> 
<option selected="selected">Candy</option> 
<option>Taffy</option> 
<option selected="selected">Caramel</option> 
<option>Fudge</option> 
<option>Cookie</option> 
</select> 

<div id="test2"></div> 

<script> 
    $("select#test1").change(function() { 
    var str = ""; 
    $("select option:selected").each(function() { 
     str += $(this).text() + " "; 
    }); 
     $("div#test2").text(str); 
    }) 
    .change(); 
</script> 


<select id="test3" name="sweets" multiple="multiple"> 
<option>Chocolate</option> 
<option selected="selected">Candy</option> 
<option>Taffy</option> 
<option selected="selected">Caramel</option> 
<option>Fudge</option> 
<option>Cookie</option> 
</select> 

<div id="test4"></div> 

<script> 
    $("select#test3").change(function() { 
    var str = ""; 
    $("select option:selected").each(function() { 
     str += $(this).text() + " "; 
    }); 
     $("div#test4").text(str); 
    }) 
    .change(); 
</script>

내가 ID 년대와 분리 시도가 있지만, 아직 꽤있다. 어떻게하면 정상적으로 작동합니까?

출처

2013-05-24 user1701964

죄송합니다. 질문을 이해하지 못했습니다. selectbox의 선택된 값 텍스트를 해당 div에 배치하려고합니까? –

안녕하세요, Nix 죄송합니다 내게 알려주십시오 : # test1에서 선택한 항목 만 표시하려면 # test2도 # test3에 대해 선택된 항목을 표시합니다. 코드에 여기에 함수를 추가해야한다고 생각합니다. 전화를 걸지 만, 어떻게해야할지 모르겠습니다. – user1701964

질문에 대한 대답은 아니지만 '

페이지에서 선택한 모든 옵션을 선택했기 때문입니다. $("select option:selected").each(..) 대신 $(this).find("select option:selected").each(..)을 사용하십시오. 이렇게하면 test2-div에서 변경된 select 옵션 중 선택된 옵션 만 표시되고 다른 옵션에서는 옵션이 표시되지 않습니다. 그것은 당신이 실제로 원하는 것 같다

출처

2013-05-24 06:44:45 Vince

$("select#test1").change(function() { 
    var str=$("#test1 :selected").text(); 
    $("div#test2").text(str); 
});

JS 바이올린 http://jsfiddle.net/xdJ3H/

출처

2013-05-24 06:56:15 sachin

는 형제 DIV 태그에 선택 상자에 관한 일반적인 컨트롤입니다.

(function() { 
    function update() { 
     var str = $.map($('option:selected', this), function(option) { 
      return $(option).text(); 
     }).join(' '); 

     $(this).next().text(str); 
    }; 

    $("select").change(update) 
    .each(update); 
})();

http://jsfiddle.net/b9chris/KpUWP/

그래서 먼저 대신 변경() 핸들러에 직접 할당 한 후 변경() 이벤트를 트리거의 별도 업데이트 함수를 정의 :이를 위해 당신은 조금 다른 뭔가를 원한다. 이렇게하는 것이 꽤 좋은 해킹이지만 다른 이벤트가 변경 이벤트를 수신해야하는 경우 이상한 문제가 발생합니다.

div를 얻으려면 문자열을 할당해야합니다. 항상 다음 형제임을 알고 있기 때문에 .next()을 사용하면됩니다.

작성한 공백 구분 문자열을 작성하려면 각 루프 대신 선택한 목록 (이 경우 선택한 옵션 태그)의 각 요소를 가져 와서 텍스트 값을 반환하는 map 함수를 사용할 수 있습니다. 결과는 JS의 내장 .join() 메소드가 최종 문자열을 빌드하는 원하는 배열을 단순하게 배열 한 것입니다.

업데이트 기능의이 개체가 select 태그임을 이미 알고있는 것으로 보입니다. ID를 사용하고 주어진 핸들러에서 참조되는 항목을 처리하지 않고도 $('option:selected', this)에 대한 호출과 같은 검색 컨텍스트로이를 사용하여 해당 태그의 옵션 만 얻을 수 있습니다.

출처

2013-05-24 08:37:28

JQuery .change 태그로 어려움을 겪고있는 초보자

관련 문제