I want to get a selected value on the form.
Suppose If I select category "car" from sub-category "nissan". I want this value on php.
Not value 1 and 1 because I do not recognise what value is selected. I want name or unique value in my php file.
This is php file on the same page:
<?php
if(isset($_POST['select1'])){
$select1 = $_POST['select1'];
}
if(isset($_POST['select2'])){
$select2 = $_POST['select2'];
}
?>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
</script>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post">
<select name="select1" id="select1">
<option value=""></option>
<option value="1">car</option>
<option value="2">phone</option>
<option value="3">tv</option>
</select>
<select name="select2" id="select2">
<option value=""></option>
<option value="1">toyota</option>
<option value="1">nissan</option>
<option value="1">bmw</option>
<option value="2">Iphone</option>
<option value="2">LG</option>
<option value="2">Samsung</option>
<option value="3">Philips</option>
<option value="3">Samsung</option>
</select>
</form>
</html>
<script>
$("#select1").change(function() {
if ($(this).data('options') == undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
</script>
Any idea or suggestions would be welcome Thank You.
You can remove the value property from all your options if you want to receive the text on the server instead. Try this
// get all categories and sub categories
let categories = {};
$('#select2 option[data-category]').each(function(i, element){
let category = $(this).data('category');
// add category
if( categories[category] == undefined ) categories[category] = [];
// add sub category to category
categories[category].push(element.textContent);
// remove the option from the DOM
element.remove();
});
// append related sub categories to #select 2
$("#select1").change(function() {
let subs = categories[this.value] ?? []; // sub categories for selected category
$('#select2').html('<option></option>').append(subs.map(txt => `<option>${txt}</option>`));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post">
<select name="select1" id="select1">
<option></option>
<option>car</option>
<option>phone</option>
<option>tv</option>
</select>
<select name="select2" id="select2">
<option></option>
<option data-category="car">toyota</option>
<option data-category="car">nissan</option>
<option data-category="car">bmw</option>
<option data-category="phone">Iphone</option>
<option data-category="phone">LG</option>
<option data-category="phone">Samsung</option>
<option data-category="tv">Philips</option>
<option data-category="tv">Samsung</option>
</select>
</form>hmm, Add the data attribute in the parent option and give a value like data-parent='1' and change value='car'
same you can do with child data-child='1' and value="toyota"
then simply target the data attribute in js and remove other options from the child options