How to disable an option in a select

Question

How to disable an option in a select

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I'm working with PHP and JavaScript .

I have a select , which is filled in by bringing the data from a BD . What I try to do is that when selecting an option of select , it is disabled so that the user can not access that option again. Can someone help me out? '

Here I leave a bit of my code:

<select id="Cursos">  </center>
		<option id="opt0" value="#">Seleccione su curso</option>
		<?php 
			
			while($curso=pg_fetch_array($resultado)){
		?>
		<option id="opt1" value="<?php echo $curso[id_curso] ?>"><?php echo $curso[1] ?> </option> <?php } ?>	
	</select> 
	<input type="submit" name="btn1" onclick="quest00.php" value="Ir al curso">
	<script> </script>

javascript php

asked by Alberto Rodriguez 10.01.2017 в 21:45

source

4 answers

Error converting nvarchar data type to date - SQL Server Code to get xml or Json Java [duplicate]

score 1 · Answer 1

If what you want to happen is to disable the% full select so that the user can not change their selection, what you can do is change add the attribute disabled with the value disabled or true .

Please note that the fields that are disabled are not sent with the form , so you should add a hidden field with the same name as the select and the value that was selected (and that yes will be sent without problems).

Here you can see a working example:

document.getElementById("Cursos").addEventListener("change", function() {

  // crea un campo oculto con el mismo nombre que la lista desplegable
  var oculto = document.createElement("input");
  oculto.type  = "hidden";
  oculto.value = this.value;
  oculto.name  = this.name;
  document.getElementById("miForm").appendChild(oculto);
  
  // deshabilita la lista desplegable
  this.disabled = "disabled";
});

<form id="miForm">
  <select id="Cursos" name="Cursos">  
    <option id="opt0" value="#">Seleccione su curso</option>
    <option id="opt1" value="1">Curso 1</option>
    <option id="opt2" value="2">Curso 2</option>
    <option id="opt3" value="3">Curso 3</option>
  </select> 
  <input type="submit" name="btn1" value="Ir al curso">
</form>

score 0 · Answer 2

Try never to take the power of decision from a user, provide a bad user experience (UX, forgive the redundancy).

function onChange (select) {
  const value = select.value;
  let option = select.querySelector('option[value="${value}"]');
  option.disabled = true;
}

<select onchange="onChange(this)">
  <option value="a">A</option>
  <option value="b">B</option>
</select>

score 0 · Answer 3

To the option you want to disable add the property disabled but what you really need is a condition so that when it is fulfilled then print this property. Consider the following code:

while($curso=pg_fetch_array($resultado)){   
    echo '<option id="opt1" value="'. $curso[id_curso] .'" ' . ($se_deshabilita == true ? 'disabled' : '') . '>' . $curso[1] .'</option>';
} 
?>  
</select>

score 0 · Answer 4

0

An alternative is to use the Chosen or select2 plugin, which in addition to the functionality you need provides other features.

Chosen: link

Select 2 link

answered by 11.01.2017 в 00:53