How to conjugate the SELECT to hide their OPTIONS in HTML

Question

How to conjugate the SELECT to hide their OPTIONS in HTML

Navigation

#1 by (0 votes)

2

my query is as follows, I have a database of table "departments" that presents the following columns: department, province, district. with this I make a call to the database to be able to offer options to the 3 SELECT that I present. So what I'm looking for is that the select conjugate with each other, that is, this unblocked department and that this blocked province and district. then when you select a department, province is unblocked, and you only show me the provinces of that department, and the same when you select province, show me the districts of that province.

something like this:

and the code is as follows:

<!DOCTYPE html>
<html>
<head>
  <title>SELECT</title>
  <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
</head>
<body>

<center>
<label>Departamento: </label>
<select name="sss" id="sss" onchange="this.form.submit()">
  <option value="">Seleccione una opcion</option>
       <?php
      $con = mysql_connect("localhost","root","");
      mysql_select_db("informacion",$con);
      mysql_set_charset("utf8",$con);
      $consulta1= mysql_query("SELECT distinct(departamento) as x FROM departamentos "); 
          while($data= mysql_fetch_array($consulta1)){
                     $depa=$data['x'];
                     echo "<option value='".$depa."' $selected>".$depa."</option>"; 
                    }
         ?>
    </select>
   <br><br>
   <label>Provincia: </label>
   <select name="ttt" id="ttt" onchange="this.form.submit()">
       <option value="">Seleccione una opcion</option>
       <?php
      $con = mysql_connect("localhost","root","");
      mysql_select_db("informacion",$con);
      mysql_set_charset("utf8",$con);
      $consulta2= mysql_query("SELECT distinct(provincia) as x FROM departamentos where departamento='LIMA'"); 
          while($data= mysql_fetch_array($consulta2)){
                     $provi=$data['x'];
                     echo "<option value='".$provi."' $selected>".$provi."</option>"; 
                    }
         ?>
   </select>
   <br><br>
    <label>Distrito: </label>
   <select name="vvv" id="vvv">
   <option value="">Seleccione una opcion</option>
       <?php
      $con = mysql_connect("localhost","root","");
      mysql_select_db("informacion",$con);
      mysql_set_charset("utf8",$con);
      $consulta3= mysql_query("SELECT distinct(distrito) as x FROM departamentos where departamento='LIMA' AND provincia='LIMA'"); 
          while($data= mysql_fetch_array($consulta3)){
                     $distr=$data['x'];
                     echo "<option value='".$distr."' $selected>".$distr."</option>"; 
                    }
         ?>

       </select>
       </center>
      </body>
    </html>

Could the conjugation be done? Is it necessary to do with SELECT or can it be done differently?

html php

asked by Kevincs7 26.09.2018 в 19:06

source

1 answer

URL of origin of the chat on Facebook Customer Chat Plugin Hide Div from another

score 0 · Answer 1

I have come up with something like that. What I do is leave the second default selection disabled and when I change the status of the select I remove the property from disabled.

I have used the JQuery library, it is in case you want to use it in your files (although for the test I used a online route ).

Finally, clarify that I put the data by hand (so that it was a simple example).

    <html>
        <body>
            A:<select type="text" name="uno" id="uno">
                <option selected="true" disabled="disabled" value='1'>Seleccione una opción</option>
                <option value='2'>Casa</option>
                <option value='3'>Perro</option>
            </select>
            <br>
            B: <select type="text" name="dos" id="dos" disabled="">
                <option selected="true" disabled="disabled" value='1'>Seleccione una opción</option>
                <option value='2'>Luis</option>
                <option value='3'>Jaime</option>
            </select>
        </body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#uno').change(function () {
                    $('#dos').removeAttr('disabled');
                });
            });
        </script>
    </html>