동적으로 생성 된 선택 상자에서 값의 중복을 제한하는 방법은 무엇입니까?

행을 동적으로 생성 할 수있는 테이블이 있습니다. 동적으로 생성 된 각 행에는 두 개의 텍스트 상자와 하나의 선택 상자가 있습니다.동적으로 생성 된 선택 상자에서 값의 중복을 제한하는 방법은 무엇입니까?

선택 상자를 사용하여 사용자가 원하는 제품을 선택할 수있게했습니다.

중요한 것은 동일한 제품을 두 개 이상 선택하지 못하도록 사용자를 제한하고 싶습니다.

예를 들어 사용자가 첫 번째 행에서 풍선을 선택하고 추가를 클릭하여 새 행을 추가하는 경우 풍선을 선택하는 옵션이 선택 상자에 없어야합니다.

가 이것에 대한 어떤 JQuery와 접근 방식, 또는 원시 기능인 자바 스크립트를 괜찮을한다면 그것은 좋은 것입니다 행동 here

에서를 참조하십시오.

미리 감사드립니다.

출처

2012-02-22 Bala.C

코드가 난독 화 된 내 친구처럼 보입니다. – gideon

흠, 왜 jQuery로 태그가 지정되어 있습니까? 데모에서 사용하지 않는 것 같습니다. "추가"를 클릭하면 사용 가능한 모든 선택 필드를 거쳐야합니다 (또는 객체/배열에 해당 정보를 저장). 이미 선택된 옵션을 찾아 새로 생성 된 선택에서 제거하십시오. –

나는 아무도 이것을 만지기 때문에 생각하지 않는다 : 1. 당신의 부호는 난독 화된다; 2. 거대한 문자열을 사용하여 요소를 생성하고 있습니다. 3. 질문은 잘 생각하지 못합니다. 행을 추가 한 후 사용자가 이전 선택을 변경하면 어떻게됩니까? 옵션을 제외하려면 $ ("# insSpec select option : selected")를 반복하고 새 선택에서 각 옵션의 텍스트를 제외하십시오. –

멋진 것은 아니지만 실물 크기의 모형으로는 충분합니다. 한번 봐주세요.

<!DOCTYPE HTML> 
<html> 
<body> 
    <table> 
    <tr> 
     <td>Product</td><td>Mfd_date</td><td>RRX(Qty)</td> 
    </tr> 
    <tr> 
     <td> 
     <select id="selector"> 
     </select> 
     </td> 
    </tr> 
    </table> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
    var products = ['Baloon', 'Nachos', 'Cola']; 

    $('#selector').change(function() { 
    var product = $('#selector').val(); 
     products.splice(products.indexOf(product), 1); 
     addRow(product); 
     updateSelector(); 
    }); 

    var addRow = function(product) { 
     var row = $('<tr><td>' + product + '</td><td><input></td><td><input></td><td><button>Delete</button></td></tr>'); 
     $('table tr:last').before(row); 
     $('button', row).click(function() { 
      products.push($('td:first', row).text()); 
      row.remove(); 
      updateSelector(); 
     }); 
    } 

    var updateSelector = function() { 
     $('#selector').toggle(products.length > 0); 
     $('#selector').empty(); 
     $('#selector').append('<option></option>'); 
     for(var i=0; i<products.length; i++) 
     $('#selector').append('<option>' + products[i] + '</option>'); 
    } 

    updateSelector(); 
    </script> 
</body> 
</html>

출처

2012-02-22 07:42:37

초기 접근법을 사용하고 완전히 다시 작성하는 대신 작동하게한다고 가정했습니다. 이

function insSpec() 
    { 
    rl=document.getElementById("insSpecc").rows.length; 
    var a=document.getElementById("insSpecc").insertRow(rl); 
    var h=a.insertCell(0); 
    var f=a.insertCell(1); 
    var m=a.insertCell(2); 
    var n=a.insertCell(3); 
    var select ='<div class="separator"><select id="prod_name'+rl+'" name="prod_name">'; 

    var prevSelectedProducts = new Array(); 

    $("select option:selected").each(function() 
    { 
     prevSelectedProducts.push($(this).text()); 
    }); 

    for(var i = 0; i < availableProducts.length; ++i) { 
     if($.inArray(availableProducts[i], prevSelectedProducts) == -1) { 
      select += '<option value="'+availableProducts[i].toLowerCase()+'">'+availableProducts[i]+'</option>'; 
     } 
    } 

    delete prevSelectedProducts; 

    h.innerHTML=select+'</select>'; 
    f.innerHTML='<input type="text" name="mfd_date[]" id="mfd_date'+rl+'" size="5" />'; 
    m.innerHTML='<input type="text" name="client_rrx[]" id="client_rrx'+rl+'" size="5" />'; 
    n.innerHTML='<button class="del_img" onClick="delSpec(this)"/>Delete</button></div>'; 

    }

처럼 뭔가에 insSpec 기능을 변경할 수 있도록 아마도 동적으로하지만 선택 옵션을 처음 구축 할 것이며,이 구현은 이미 입력 선택을 변경을 방해하지 않습니다. 선택이 끝나면 선택 상자를 일반 텍스트 또는 무언가로 바꾸면 방해가 될 것입니다.

출처

2012-02-22 07:57:29 inquam

동적으로 생성 된 선택 상자에서 값의 중복을 제한하는 방법은 무엇입니까?

답변

관련 문제