Как ограничить дублирование значений в динамически создаваемых полях выбора? - PullRequest
Новая
       2

Как ограничить дублирование значений в динамически создаваемых полях выбора?

3 голосов
/ 22 февраля 2012

У меня есть таблица, строки которой можно создавать динамически.Каждая динамически создаваемая строка будет иметь два текстовых поля и одно поле выбора.

Я использую поле выбора, чтобы позволить пользователю выбрать продукт по своему выбору.

Дело в том, что я хочуограничить пользователя от выбора одного и того же продукта более чем одним.

Например, если пользователь выбирает «Воздушный шар» в первой строке и нажимает кнопку «Добавить», чтобы добавить новую строку, опция выбора воздушного шара не должна присутствовать вустановите флажок.

См. это в действии здесь

Было бы замечательно, если бы был какой-либо подход jquery для этого, или даже сырой javasript был бы хорош.

Заранее спасибо

Ответы [ 2 ]

1 голос
/ 22 февраля 2012

Это не круто, но выглядит достаточно хорошо для макета. Пожалуйста, посмотрите. 

<!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>
0 голосов
/ 22 февраля 2012

Я предположил, что вы хотели использовать свой первоначальный подход и просто заставить его работать вместо полной перезаписи. Таким образом, вы можете изменить вашу insSpec функцию на что-то вроде 

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>';

    }

Я бы, вероятно, динамически создал параметры выбора с первого раза, хотя эта реализация не мешает вам изменять уже введенные варианты выбора. Вероятно, этому следует помешать, превратив поле выбора в простой текст или что-то еще, когда выбор сделан.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...