Populating DIV after selecting a data in the list

Asked

Viewed 267 times

0

Could someone help me with this code? I assume I do not understand about 80%, I am trying to popular the INFO div after selecting one of the options in the SELECT field, this information will be relative to the selected option, the information concerning the selected option is contained in the page example.php... As it is, it is working, however the information is being presented within an OPTION, I would like it at least to be populated within an INPUT

<html>
 <head>
<title>Exemplo</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<label for="montadora">Montadora:</label>
<select name="montadora" id="montadora">
<option value="1">Fiat</option>
<option value="2">Ford</option>
<option value="3">Volkswagen</option>
</select>
<br />
<label for="veiculo">Veiculo:</label>
<select name="veiculo" id="veiculo"></select>    

<div id="INFO">      
</div>      

<script type="text/javascript">      
$(document).ready(function(){
$("#montadora").change(function(){
$.ajax({
type: "POST",
url: "exemplo.php",
data: {montadora: $("#montadora").val()},
dataType: "json",
success: function(json){
var options = "";
$.each(json, function(name, value){
options += '<option value="' + name + '">' + name + '</option>';
});
$("#veiculo").html(options);
}
});
});
});

</script>
</body>
</html>

1 answer

1


Notice the line

options += '<option value="' + name + '">' + name + '</option>';

it is responsible for creating the values within the option tag, to change just change the line to the desired tag. In the case of input of the kind texto would look something like.

options += '<input type="text" value="' + name + '"/>';

To remove the input and present the text cleanly just remove the tags and leave only the variable name.

Also check that the data is included within the select id veiculos. To change to div with id info you must change the line

$("#veiculo").html(options);  

To

$("#info").html(options);
  • Would you like to tell me how to delete JSON and use a normal query?? I don’t know how to use JSON

  • If with normal query you refer to loading HTML, you can use the jQuery Load. Simply inform where the loaded content will be placed. Something like: $( "#INFO" ).load( "pagina.html" );

Browser other questions tagged

You are not signed in. Login or sign up in order to post.