정렬되지 않은 목록 옵션을 텍스트 서식 파트 2에 배치하기 입력 파트 2

Question

어제 제 질문에서 계속해서, 나는 생각하고있는 문제에 접근하는 방법을 알아야합니다. Jquery 코드를 설정할 필요가 없지만이 문제를 공격하는 방법을 알고 싶습니다.

나는 사용자가 그 중 하나를 클릭하면 내 양식 상자 중 하나에있는 값으로 이전 할 때 정렬 된 옵션 목록이 있습니다.

예를 들어 판타지 축구 사이트를 생각해보십시오.

사용자는 4 명의 플레이어를 선택하여 팀의 수비를위한 양식 상자로 이동하도록 선택할 수 있습니다. 그들은 임의의 순서로 이들 플레이어를 선택할 수 있지만 선택한 이전의 것을 대체하지 않고 4 개의 폼 입력 상자에 나타나야합니다. 그래서 이전 상자가 이미 채워진 경우 각 Option에 입력 할 Form 입력 상자를 선택할 수 있도록 Jquery 코드가 필요합니다. 너 혼란스러워?

"If Else"루프를 사용해야하지만이를 구현하는 가장 좋은 방법은 없을 것이라고 생각합니다.

도와 주실 수 있나요? 감사합니다

당신이 어떤 컨테이너의 첫 번째 빈 입력을 찾을 수 있습니다

Answer 1

제 4 옵션의 이름이 .DEF1이고 제 4 입력란의 이름이 .playerbox2 인 경우이를 정렬해야하는 코드입니까? 미안, 내 뇌가 오늘 일하지 못해.

$(document).ready(function(){ 
    $(".DEF1").click(function(){ 
     var valuestring=$(this).text(); 
     $(".playerbox2").val(valuestring); 

     var $emptyInput = $('.playerbox2').filter(function() { return this.value != ''; }).eq(0); 
     if ($emptyInput.length) { 
    $(emptyInput).val(valuestring); 
} 
});}); 

Answer 2

는 :

if ($emptyInput.length) { 
    $(emptyInput).val(newValue); 
} 

:

var $emptyInput = $('#someDiv input') 
    .filter(function() { return this.value == ''; }) 
    .eq(0); 

그런 다음 가 빈 하나 있다는 것을 확인하기 위해 한 번 확인 할 수 있습니다 Here은 내가 설명한 것과 비슷한 것으로 생각하는 상황에서 이것을 사용하는 jsfiddle 예제입니다.