onclick function is not working in chrome-CodePudding

I am using codeigniter-3 to develop we application ,i have one page in that two dropdowns are there both are dependent each other for example if i select first dropdown based on that second dropdown values should populate for this part i have done it's working fine in firefox but not in chrome,did i miss anything ..?

<div >
    <label for="exampleInputName1">Product Category</label>
    <select name="product_category_lists"   id="cat_id" required="">
     <option value="">--Select Category</option>
     <option value="fresh_food" onclick="home()" >Home</option>
     <option value="broth" onclick="kitchen()">Kitchen</option>
    </select>
</div>
<div >
  <label for="exampleInputName1" >Product</label>
  <select name="product_category"  id="cust_drop"  required>

    </select>
</div>

<script>
function home(){
    var a = document.getElementById('cust_drop').value;
    document.getElementById('cust_drop').innerHTML ="";
    var options = `
    <option value="">--Select Category</option>
                        <option value="">TV & Appliances</option>
                      `
console.log('options',options);
document.getElementById('cust_drop').innerHTML = options;
}

function kitchen(){
    document.getElementById('cust_drop').innerHTML ="";
    var options = `<option value="">--Select Category</option>`
    document.getElementById('cust_drop').innerHTML = options;
}
</script>

CodePudding user response：

Here you go ,Try to use onchange instead of onclick.

<div >
    <label for="exampleInputName1">Product Category</label>
    <select onchange="producttypes(this.value)" name="product_category_lists"   id="cat_id" required="">
     <option value="">--Select Category</option>
     <option value="fresh_food >Home</option>
     <option value="broth" >Kitchen</option>
    </select>
</div>

<script>
function producttypes(optiontype){
   //Move your logic here based on optiontype you will segregate
 if(optiontype == 'fresh_food"){
   var a = document.getElementById('cust_drop').value;
    document.getElementById('cust_drop').innerHTML ="";
    var options = `
    <option value="">--Select Category</option>
                        <option value="">TV & Appliances</option>
                      `
console.log('options',options);
document.getElementById('cust_drop').innerHTML = options;
}
if(optiontype=="broth"){
   //your logic goes here
}
}
</script>

CodePudding user response：

Is a bad practice to try to use onclick with select. The select component is used for forms. If you need to use a dropdown, try to use this component instead of selecting it.

I don't know why are you using the select component but I think that is not correct.

If you use select need to use jQuery the onChange event to capture de value of the option selected and do the correct action.

$(document).ready(function(){
   $('#yourSelectId').on('change', function(){
       var option = $(this).value();

       //Or you can try this too.
       $( "#yourSelectId option:selected" ).value();

       //Use IF or Switch (I prefer switch normally)
       if(option == "fresh_food") home();
       else if(option == "broth") kitchen();
   });
});

I hope that this helps you.

Kind regards.