jQuery를은 여러 옵션을 선택 형태를 선택 얼마나 많은에 따라 새로운 입력을 만들 받고, 문제가있는 형태로

나는 이전 받았다 도움을 트리거합니다. 아래 코드는 (신용 Peter Bailey로 이동)jQuery를은 여러 옵션을 선택 형태를 선택 얼마나 많은에 따라 새로운 입력을 만들 받고, 문제가있는 형태로

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 

$(function() 
{ 
    $('#test') 
    .after('<div id="option-inputs"></div>') 
    .find('option').each(function() 
    { 
     var $option = $(this); 
     $option 
     .data('$input', $('<span>' + $option.text() + ': </span><input><br>').appendTo('#option-inputs').hide()) 
     .bind('toggle-input', function() 
     { 
      var $input = $option.data('$input'); 
      if ($option[0].selected) 
      { 
      $input.show(); 
      } else { 
      $input.hide(); 
      }  
     }) 
     .bind('click', function() 
     { 
      $(this).siblings().andSelf().trigger('toggle-input'); 
     }) 
     .trigger('toggle-input') 
     ; 
    }) 
    ; 
}); 


</script> 

</head> 
<body> 

<select id="test" multiple="multiple"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

</body> 
</html>

나는 내가 마지막으로 팅겨 도움이 필요 jQuery를 모르는 나를 위해 일하게 종료 것입니다. 선택한 옵션 중 새 상자를 만드는 것을 제한 할 수 있어야합니다. 따라서 값이 -1 또는 0 인 옵션을 선택하면 새 텍스트 상자가 만들어지지 않습니다. 다른 것은 않습니다.

다른 선택 양식을 사용하여 업데이트 할 수있는 방법이 있습니까? 일반 자바 스크립트에서는 onChange = ""와 함수를 사용하여 업데이트합니다. 그 이유는 select 테이블이 이전 선택 테이블의 입력을 기반으로 동적으로 채워지 기 때문입니다. 돌아가서 이전 select 테이블을 변경하면 jQuery가 업데이트되지 않고 이전 입력이 그대로 유지됩니다.

도움을 주셔서 감사합니다.

출처

2009-08-24 Dave Hunt

이 새로운 옵션을 수신 할 때 수 있도록의 <select>에 대해 "시 초기화"루틴을 설정해야합니다 다시 설정 링크 된 입력.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 

$(function() 
{ 
    // How you manage this data is up to you, this is just an example 
    var optionData = { 
     1: { 1: "1.1", 2: "1.2", 3: "1.3" } 
    , 2: { 1: "2.1", 2: "2.2", 3: "2.3" } 
    } 
    var $test = $('#test'); 

    $test.bind('init', function() 
    { 
    $optionInputs = $('#option-inputs'); 
    if (!$optionInputs.length) 
    { 
     $optionInputs = $('<div id="option-inputs"></div>').insertAfter($test); 
    } 
    $optionInputs.children().remove(); 
    $test.find('option').each(function() 
    { 
     var $option = $(this); 
     $option 
     .data('$input', $('<span>' + $option.text() + ': </span><input><br>').appendTo($optionInputs).hide()) 
     .bind('toggle-input', function() 
     { 
      var $input = $option.data('$input'); 
      if ($option[0].selected) 
      { 
      $input.show(); 
      } else { 
      $input.hide(); 
      }  
     }) 
     .bind('click', function() 
     { 
      $(this).siblings().andSelf().trigger('toggle-input'); 
     }) 
     .trigger('toggle-input') 
     ; 
    }); 
    }); 

    $('#changer').bind('change', function() 
    { 
    var $this = $(this) 
     , options = optionData[$this.val()] 
     , optionHtml = ''; 
    ; 

    for (var i in options) 
    { 
     if (options.hasOwnProperty(i)) 
     { 
     optionHtml += '<option value="' + i + '">' + options[i] + '</option>'; 
     } 
    } 
    $test.html(optionHtml).trigger('init'); 
    }).trigger('change'); 
}); 


</script> 

</head> 
<body> 

<select id="changer"> 
    <option value="1">Set 1</option> 
    <option value="2">Set 2</option> 
</select> 

<select id="test" multiple="multiple"> 
</select> 

</body> 
</html>

출처

2009-08-24 22:04:12

나는 이것이 내가 원하는 것보다 조금 더 생각합니다. 내가 원하는 것은 "변경자"가 변경 사항이있을 경우 새로 작성한 입력을 지우는 것입니다. 내가 선택한 시험에서 무언가를 선택하고 새로운 입력이 돌아가서 그 새로운 입력을 제거합니다 체인저에 뭔가를 선택, 생성 된 경우 내가 선택 시험에 다시 뭔가를 선택하는 경우 예를 들어 는 다음 다시 만듭니다. –

최선 나는 당신의 설명에서 알 수 있기 때문에 정말 뭔가를 누락, 그게 바로이가하는 일입니다. –

빠르고 간단한 솔루션은 .each 함수 호출의 상단에있는 값을 확인하는 것, 그리고 (A .each 루프에 break처럼 작동) 0 또는 -1, 반환의 경우.

if ($option.attr('value') == 0 || $option.attr('value') == -1) return;

그리고 전체 코드에 대한

$(function() 
{ 
    $('#test') 
    .after('<div id="option-inputs"></div>') 
    .find('option').each(function() 
    { 
     var $option = $(this); 
     //new code 
     if ($option.attr('value') == 0 || $option.attr('value') == -1) return; 

     $option 
     .data('$input', $('<span>' + $option.text() + ': </span><input><br>').appendTo('#option-inputs').hide()) 
     .bind('toggle-input', function() 
     { 
      var $input = $option.data('$input'); 
      if ($option[0].selected) 
      { 
      $input.show(); 
      } else { 
      $input.hide(); 
      }  
     }) 
     .bind('click', function() 
     { 
      $(this).siblings().andSelf().trigger('toggle-input'); 
     }) 
     .trigger('toggle-input') 
     ; 
    }) 
    ; 
});

출처

2009-08-24 20:50:36 tj111

jQuery를은 여러 옵션을 선택 형태를 선택 얼마나 많은에 따라 새로운 입력을 만들 받고, 문제가있는 형태로

답변

관련 문제