Leave a select without options

Question

Leave a select without options

Navigation

#1 by (3 votes)

0

I have the following select where I select a type of wood and this has sub products of this, but sometimes the wood has no sub product so it hides the select of the byproduct. But when rescuing the data and sending it to the AJAX database sends me the sub product being that the select is hidden

Is there any way to leave the value of this select byproduct null?

$("#clasificacion").change(function() {

    var valor = $(this).val(); // Capturamos el valor del select
    var texto = $(this).find('option:selected').text(); // Capturamos el texto del option seleccionado


    switch (texto) {
        case 'Madera1':
            $("#divhidden").first().show("fast", function() {});
            var newOptions = {
                "Madera1.1": "Madera1.1",
                "Madera1.2": "Madera1.2"
            };

            var $el = $('#subclasificacion');
            $el.html(' ');
            $.each(newOptions, function(key, value) {
                $el.append($("<option></option>")
                    .attr("value", value).text(key));
            });
           
            break;
        case 'Madera2':
            $("#divhidden").hide(100);
        
            break;
    
        case 'Madera3':
           $("#divhidden").first().show("fast", function() {});
            var newOptions = {
                "Madera3.1": "Madera3.1",
                "Madera3.2": "Madera3.2"
            };

            var $el = $('#subclasificacion');
            $el.html(' ');
            $.each(newOptions, function(key, value) {
                $el.append($("<option></option>")
                    .attr("value", value).text(key));
            });
            break;
      
      
   
    }

});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <div class="col-sm-3">
             <small>Clasificacion Producto</small>
        <select class="form-group browser-default custom-select" id="clasificacion">
           <option selected disabled>.::Clasificacion::.</option>
           <option value="Madera1">Madera1</option>
           <option value="Madera2">Madera2</option>
           <option value="Madera3">Madera3</option>
              
                        </select>
                      </div>
  <div class="col-sm-3" id="divhidden">
                            <label>Sub Clasificacion Producto</label>
          <select class="form-group browser-default custom-select" id="subclasificacion">
               
                                <option value="Madera1.1">Madera1.1</option>
                                <option value="Madera1.1">Madera1.2</option>

                            </select>
                        </div>

I hope to have explained myself well. Greetings

javascript html php

asked by MoteCL 15.11.2018 в 21:03

source

1 answer

how to pass a variable from js to php 'NoneType' object has no attribute 'split'

score 3 · Accepted Answer

An alternative, and that I consider that responds to a good practice, especially when you refresh the information with ajax, is that for all the listings you add a default option. For example:

var newOptions = {
            "-1":"Seleccione..",
            "Madera1.1": "Madera1.1",
            "Madera1.2": "Madera1.2"
        };

What will generate something like:

<option value="-1">Seleccione...</option>

Make sure that each time you select a parent list, the child list points to that default option.

It would also be good to work with a value that represents null for you, (like -1 in my example) and not to send null directly, because when managing a quantifiable valos, it is easier to operate on it.

The current problem is that you simply hide the second combobox when you choose "wood 2", but still maintain the values of the last selected main combobox. That is why it will be useful to add that option by default.

It would be something like that.

case 'Madera2':
        $("#divhidden").first().show("fast", function() {});
        var newOptions = {
            "-1": "Esto jamás se verá"
        };

        var $el = $('#subclasificacion');
        $el.html(' ');
        $.each(newOptions, function(key, value) {
            $el.append($("<option></option>")
                .attr("value", value).text(key));
        });

        $("#divhidden").hide(100);

        break;

In this case, a sublist will be created and by default it will assume the value -1 (it will hide it as you do so far), which you could already capture to continue with your business logic.

I hope to contribute