Home / Questions / 465955
Accepted
John Doe
Asked: 2022-07-01 13:26:03 +0800 CST 2022-07-01 13:26:03 +0800 CST

How to display selected values ​​of my checkbox in the first value

  • 772

I am looking for a solution to be able to display the elements that I select in my dropdown in the first value, that is, I have a dropdown with a list of values ​​in the checkbox which I would like to display in the first section of my dropdown without having to display everything the list.

The following is an example of the dropdown with checkbox that I am implementing:

$(".checkbox-dropdown").click(function () {
    $(this).toggleClass("is-active");
});

$(".checkbox-dropdown ul").click(function(e) {
    e.stopPropagation();
});
.checkbox-dropdown {
    width: 200px;
    border: 1px solid #aaa;
    padding: 10px;
    position: relative;
    margin: 0 auto;
    
    user-select: none;
}

/* Display CSS arrow to the right of the dropdown text */
.checkbox-dropdown:after {
    content:'';
    height: 0;
    position: absolute;
    width: 0;
    border: 6px solid transparent;
    border-top-color: #000;
    top: 50%;
    right: 10px;
    margin-top: -3px;
}

/* Reverse the CSS arrow when the dropdown is active */
.checkbox-dropdown.is-active:after {
    border-bottom-color: #000;
    border-top-color: #fff;
    margin-top: -9px;
}

.checkbox-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%; /* align the dropdown right below the dropdown text */
    border: inherit;
    border-top: none;
    left: -1px; /* align the dropdown to the left */
    right: -1px; /* align the dropdown to the right */
  opacity: 0; /* hide the dropdown */
   
    transition: opacity 0.4s ease-in-out;
    height: 100px;
    overflow: scroll;
    overflow-x: hidden;
    pointer-events: none; /* avoid mouse click events inside the dropdown */
}
.is-active .checkbox-dropdown-list {
    opacity: 1; /* display the dropdown */
    pointer-events: auto; /* make sure that the user still can select checkboxes */
}

.checkbox-dropdown-list li label {
    display: block;
    border-bottom: 1px solid silver;
    padding: 10px;
   
    transition: all 0.2s ease-out;
}

.checkbox-dropdown-list li label:hover {
    background-color: #555;
    color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-dropdown">
  Seleccione una opción
  <ul class="checkbox-dropdown-list">
    <li>
      <label>
        <input type="checkbox" value="Vejle" name="city" />Milwaukee</label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="Horsens" name="city" />Denver</label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="Kolding" name="city" />Boston</label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="Kolding" name="city" />LA</label>
    </li>
    
  </ul>
</div>

I explain it again, what I require is to display the selected elements of my dropdown in the first value, that is, they can be displayed where the value of "Seleccione una opción".

I hope someone can understand what I'm looking for.

javascript

2 Answers

  1. You can have the selected items display in the space where it says "Select an option", but you need to create a new container for the message and the list of items that have been selected, displaying only one or the other.

    Some additional CSS rules are also needed to know how to display the list of selected items.

    // Span con mensaje
let selSpan = $(".checkbox-dropdown > div > span");
// Lista de elementos seleccionados
let selList = $(".checkbox-dropdown > div > ul");
// Lista de opciones (todavía no seleccionadas)
let selOptions = $(".checkbox-dropdown > ul");

$(".checkbox-dropdown").click(function () {
    $(this).toggleClass("is-active");
});

/* Esta función sirve para ambas listas */
$(".checkbox-dropdown ul > li").click(function(e) {
    e.stopPropagation();
    // Obtener checkbox
    let chk = $(e.currentTarget).find('input');
    if(chk.is(':checked')) {
        // Está marcado, mover a lista de seleccionados
        selList.append(e.currentTarget);
    } else {
        // Está desmarcado, mover a lista normal
        selOptions.append(e.currentTarget);
    }
    // Mostrar u ocultar texto, dependiendo de si hay algo seleccionado o no
    if(selList.children('li').length == 0) {
        // No hay elementos seleccionados, mostrar mensaje
        selSpan.css('display', 'inline-block');
    } else {
        // Al menos hay un elemento seleccionado, ocultar mensaje
        selSpan.css('display', 'none');
    }
});
    .checkbox-dropdown {
    width: 200px;
    border: 1px solid #aaa;
    padding: 10px;
    position: relative;
    margin: 0 auto;
    user-select: none;
}
/* Lista de elementos seleccionados */
.checkbox-dropdown > div > ul {
    list-style-type: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.checkbox-dropdown > div > ul li {
    display: inline-block;
    color: #44a;
    background: #aef;
    border: 1px #44a solid;
    margin: 2px 5px;
    padding: 2px 5px;
}
/* Ocultar checkbox de elementos seleccionados */
.checkbox-dropdown > div > ul li input { display: none; }
/* Cambiar color cuando pase el mouse */
.checkbox-dropdown > div > ul li:hover {
    color: #fff;
    background: #44a;
    border: 1px #008 solid;
}

/* Display CSS arrow to the right of the dropdown text */
.checkbox-dropdown:after {
    content:'';
    height: 0;
    position: absolute;
    width: 0;
    border: 6px solid transparent;
    border-top-color: #000;
    top: 50%;
    right: 10px;
    margin-top: -3px;
}

/* Reverse the CSS arrow when the dropdown is active */
.checkbox-dropdown.is-active:after {
    border-bottom-color: #000;
    border-top-color: #fff;
    margin-top: -9px;
}

.checkbox-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%; /* align the dropdown right below the dropdown text */
    border: inherit;
    border-top: none;
    left: -1px; /* align the dropdown to the left */
    right: -1px; /* align the dropdown to the right */
  opacity: 0; /* hide the dropdown */
   
    transition: opacity 0.4s ease-in-out;
    height: 100px;
    overflow: scroll;
    overflow-x: hidden;
    pointer-events: none; /* avoid mouse click events inside the dropdown */
}
.is-active .checkbox-dropdown-list {
    opacity: 1; /* display the dropdown */
    pointer-events: auto; /* make sure that the user still can select checkboxes */
}

.checkbox-dropdown-list li label {
    display: block;
    border-bottom: 1px solid silver;
    padding: 10px;
   
    transition: all 0.2s ease-out;
}

.checkbox-dropdown-list li label:hover {
    background-color: #555;
    color: white;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-dropdown">
  <!-- Crear contenedores para texto y lista de seleccionados -->
  <div><span>Seleccione una opción</span><ul></ul></div>
  <ul class="checkbox-dropdown-list">
    <li>
      <label>
        <input type="checkbox" value="Vejle" name="city">Milwaukee</label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="Horsens" name="city">Denver</label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="Kolding" name="city">Boston</label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="Kolding" name="city">LA</label>
    </li>
    
  </ul>
</div>

    • 2
  2. Best Answer

    Problem:

    I'll explain it again, what I need is to display the selected elements of my dropdown in the first value, that is, they can be displayed where the "Select an option" value is.

    Solution: Add an event onChangein your type elements checkboxso that when they are selected, a process of collecting selected elements is executed and then dynamically substitute in the text that saysSeleccione una opción

    It is necessary to occupy the each()jQuery manipulation attribute, create an array in javascript and occupy the manipulation attributes.html()

    $(".checkbox-dropdown").click(function () {
    $(this).toggleClass("is-active");
});

$(".checkbox-dropdown ul").click(function(e) {
    e.stopPropagation();
});

$('body').on('change', 'input[type="checkbox"]', function(ev) {
  let elementos_seleccionados = []
  // ejecutamos este proceso para saber cuáles están seleccionados e irlos guardando dinámicamente en una lista 
  $('input[type="checkbox"]:checked').each(function() {
    console.log("estoy seleccionado")
    elementos_seleccionados.push( $(this).val() );
  });
  // finalmente sustituimos todo lo que esté dentro del elemento con la clase .texto-dinamico por todos los elementos seleccionados en el dropdown
  $('.texto-dinamico').html( elementos_seleccionados.join(',') )
  
  // la siguiente condición nos sirve para que en caso de que ningún elemento de la lista sea seleccionado, regrese a su estado original de "Seleccione una opción"
  if ( elementos_seleccionados.length <= 0 ) 
    $('.texto-dinamico').html( 'Seleccione una opción' )
  
  console.log(elementos_seleccionados)
})
    .checkbox-dropdown {
    width: 200px;
    border: 1px solid #aaa;
    padding: 10px;
    position: relative;
    margin: 0 auto;
    
    user-select: none;
}

/* Display CSS arrow to the right of the dropdown text */
.checkbox-dropdown:after {
    content:'';
    height: 0;
    position: absolute;
    width: 0;
    border: 6px solid transparent;
    border-top-color: #000;
    top: 50%;
    right: 10px;
    margin-top: -3px;
}

/* Reverse the CSS arrow when the dropdown is active */
.checkbox-dropdown.is-active:after {
    border-bottom-color: #000;
    border-top-color: #fff;
    margin-top: -9px;
}

.checkbox-dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%; /* align the dropdown right below the dropdown text */
    border: inherit;
    border-top: none;
    left: -1px; /* align the dropdown to the left */
    right: -1px; /* align the dropdown to the right */
  opacity: 0; /* hide the dropdown */
   
    transition: opacity 0.4s ease-in-out;
    height: 100px;
    overflow: scroll;
    overflow-x: hidden;
    pointer-events: none; /* avoid mouse click events inside the dropdown */
}
.is-active .checkbox-dropdown-list {
    opacity: 1; /* display the dropdown */
    pointer-events: auto; /* make sure that the user still can select checkboxes */
}

.checkbox-dropdown-list li label {
    display: block;
    border-bottom: 1px solid silver;
    padding: 10px;
   
    transition: all 0.2s ease-out;
}

.checkbox-dropdown-list li label:hover {
    background-color: #555;
    color: white;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-dropdown">
  <div class="texto-dinamico">Seleccione una opción</div>
  <ul class="checkbox-dropdown-list">
    <li>
      <label>
        <input type="checkbox" value="Vejle" name="city" />Milwaukee</label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="Horsens" name="city" />Denver</label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="Kolding" name="city" />Boston</label>
    </li>
    <li>
      <label>
        <input type="checkbox" value="Kolding" name="city" />LA</label>
    </li>
    
  </ul>
</div>

    • 2