$ (이) 선택기 jsfiddle에서 작동하지만

Question

이 jsfiddle 예를 참조하십시오 내 스크립트 ... http://jsfiddle.net/nnmEY/21/

목적 ...에

수정 선택 메뉴를 통해 텍스트 영역 및 또는 직접 입력을 통해 및 텍스트 영역을 값이 div에 전달되었습니다.

문제 ...

1) 예제의 맨 아래에있는 스크립트는 아래 jsfiddle에서 미세하지만 예에서 작동합니다.

2.) 또한 .ta (textarea)에서 .tatx (div 텍스트)로 값을 전달할 때 "\ n"을 "br"로 변환하는 방법에 대한 첫 번째 스크립트에 가장 적합한 논리를 파악하려고합니다. 선택 메뉴에서 세 개 이상의 옵션을 선택할 때 문제점을 볼 수 있습니다. replaceWith() 생각하지만 작동하도록 만들지 못했습니다.

도움을 주시면 대단히 감사하겠습니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<style> 
    li {margin-bottom:7px; background:#DDD; padding:5px;} 
    #par {width:350px;} 
    .tatx {color:#C00;} 
</style> 

<div id="par"> 
<ul> 

<li> 
Select an option, then, select another option.<br> 
<select class="sl"> 
    <option value="item 1">option 1</option> 
    <option value="item 2">option 2</option> 
    <option value="item 3">option 3</option> 
</select><br> 
<p>Selected options values are passed to textarea<br> 
<textarea class="ta"></textarea> 
<p>Textarea value is passed to div as text 
<div class="tatx">Div Text</div> 
</li> 
<li> 
Select an option, then, select another option.<br> 
<select class="sl"> 
    <option value="item 1">option 1</option> 
    <option value="item 2">option 2</option> 
    <option value="item 3">option 3</option> 
</select><br> 
<p>Selected options values are passed to textarea<br> 
<textarea class="ta"></textarea> 
<p>Textarea value is passed to div as text 
<div class="tatx">Div Text</div> 
</li> 
<li> 
Select an option, then, select another option.<br> 
<select class="sl"> 
    <option value="item 1">option 1</option> 
    <option value="item 2">option 2</option> 
    <option value="item 3">option 3</option> 
</select><br> 
<p>Selected options values are passed to textarea<br> 
<textarea class="ta"></textarea> 
<p>Textarea value is passed to div as text 
<div class="tatx">Div Text</div> 
</li> 

</ul> 
</div> 

<script> 
$(document).ready(function(){ 
    $('li > .sl').on('change', function() { 
    var taVal = $(this).siblings().find('.ta').val(); 
    var tatxVal = $(this).siblings('.tatx').html() 
    var slVal = $(this).val() + '\n'; 
    var slHtml = $(this).val() + '<br>'; 
    $(this).siblings().find('.ta').val(slVal + taVal); 
    $(this).siblings('.tatx').html(slHtml + taVal); 
}); 
}); 
</script> 
<script> 
$(document).ready(function(){ 
    $('li > .ta').keyup(function(){ 
     $(this).next('.tatx').html($(this).val()); 
    }) 
}); 
</script> 

Answer 1

실제로 jsfiddle 샘플에는 아무런 문제가 없습니다. 너 가 잘못 입력되었습니다.입니다. 따라서 그것은 정의되지 않은 호출합니다. 아마도, 이것이 무슨 뜻입니까?

여기 스크립트 그리고 그것은 잘 작동 :

<div id="par"> 
    <ul> 
     <li> 
      <p>Selected options values are passed to textarea</p> 
      <select class="sl"> 
       <option value="item 1">option 1</option> 
       <option value="item 2">option 2</option> 
       <option value="item 3">option 3</option> 
      </select> 
      <br /> 
      <br /> 
      <p>Selected options values are passed to textarea</p> 
      <textarea class="ta"></textarea> 
      <div class="tatx">Div Text</div> 
     </li> 
     <li> 
      <p>Selected options values are passed to textarea</p> 
      <select class="sl"> 
       <option value="item 1">option 1</option> 
       <option value="item 2">option 2</option> 
       <option value="item 3">option 3</option> 
      </select> 
      <br /> 
      <br /> 
      <p>Selected options values are passed to textarea</p> 
      <textarea class="ta"></textarea> 
      <div class="tatx">Div Text</div> 
     </li> 
     <li> 
      <p>Selected options values are passed to textarea</p> 
      <select class="sl"> 
       <option value="item 1">option 1</option> 
       <option value="item 2">option 2</option> 
       <option value="item 3">option 3</option> 
      </select> 
      <br /> 
      <br /> 
      <p>Selected options values are passed to textarea</p> 
      <textarea class="ta"></textarea> 
      <div class="tatx">Div Text</div> 
     </li> 
    </ul> 
</div> 

<script> 
    $(document).ready(function() { 
     $("li > .ta").keyup(function() { 
      $(this).next('.tatx').html($(this).val()); 
     }) 
    }); 
</script> 
<script> 
    $(document).ready(function() { 
     $('li > .sl').on('change', function() { 
      var taVal = $(this).siblings().find('.ta').val(); 
      var tatxVal = $(this).siblings('.tatx').html(); 
      var slVal = $(this).val() + '\n'; 
      var slHtml = $(this).val() + '\n'+'<br />'; 
      $(this).siblings().find('.ta').val(slVal + taVal); 
      $(this).siblings('.tatx').html(slHtml + tatxVal); 
     }); 
    }); 
</script> 

다시 here을 확인 데모를 볼 수 있습니다. 또는 jsfiddle