Los valores que marqué en las casillas de verificación deberían aparecer en la lista desplegable.

Cada vez que selecciono un nuevo valor, los valores anteriores deben borrarse de la lista desplegable y solo deben mostrarse los nuevos valores seleccionados.

Pero ahora, se muestran nuevos valores junto con los valores anteriores.

A continuación se muestra el código que tengo actualmente.

Html:

<html>
<body>
  <select id="select-client" name="client">
    <option value="-1">-select-</option>
  </select>
</body>
</html> 

Javascript:

<script>
$(document).ready(function() {

  var selectedKnowledgeBaseArray = [];

  $("#clientuser").on('click', function() {

    $("input[type=checkbox]:checked").each(function() {
      alert($(this).val());
      selectedKnowledgeBaseArray.push($(this).val());
    });

    $.ajax({
      method: "POST",
      url: "client_user_map.json",
      processData: true,
      data: {
        selectedKnowledgeBaseArray: selectedKnowledgeBaseArray
      },
      traditional: true,
      dataType: "json",
      success: function(data) {
        $("#clntusrmap").show();
        $('#clntusrmap').find('input:text').val('');
        $('input:checkbox').removeAttr('checked');
        buildSortedData(data);
      }
    });

    function buildSortedData(data) {
      if (data[0].length > 0) {
        var select = document.getElementById("select-client");
        for (var i = 0; i < data[0].length; i++) {
          var option = document.createElement('option');
          option.text = option.value = data[0][i];
          console.log(data[0][i]);
          select.add(option, i + 1);
          $('.deleteMeetingClose').on("click", function() {
            var select = document.getElementById("select-client");
            $('select').empty();
          });
        }
      }
    }

  });
});
</script>  
3
Komal Jain 12 ene. 2017 a las 14:18

3 respuestas

La mejor respuesta

Supongo que lo que mencionó en la pregunta se ejecuta cuando se hace clic en #clientuser. Entonces, el problema es la matriz selectedKnowledgeBaseArray que se comparte entre las funciones.

Cada vez que hace clic en #clientuser, los elementos marcados del selector input[type=checkbox]:checked se agregan en selectedKnowledgeBaseArray, y luego esta matriz se pasa a la llamada AJAX.

No estoy seguro de qué devuelve la llamada AJAX, pero si devuelve los elementos que ha pasado, la función buildSortedData los recibirá e intentará agregarlos a su cuadro de selección usando select.add(option, i + 1);.

También tenga en cuenta que está llamando al siguiente fragmento en bucle

$('.deleteMeetingClose').on("click", function() {
  var select = document.getElementById("select-client");
  $('select').empty();
});

Esto vincula múltiples eventos de clic en todos los elementos que coinciden con .deleteMeetingClose, y si aún no, esto seguramente creará un problema en el futuro.

0
31piy 12 ene. 2017 a las 11:36

Pruebe $ (select) .empty (); en lugar de $ ('select'). empty ();

O en lugar de:

var select = document.getElementById("select-client");
$('select').empty();

Puedes usar el selector jquery:

$("#select-client").empty();
0
Tiago Cardoso 12 ene. 2017 a las 12:07

Déle a su opción de selección en html un ID o nombre de clase como en el código a continuación

<select id="select-choice">
</select>

Y en jQuery escribe

 /*if it is given an id*/
$('#select-choice").empty()
/*else if it is given a class name then*/
 $('.select-choice').empty() 

Este código me ayudó, espero que pueda ayudarte

0
Deepak Sharma 12 ene. 2017 a las 11:33