How to populate 3 dropdown boxes and 1 input box based on my array? HTML Javascript

Question

I need help figuring the code in my fiddle. I have 3 dropdown boxes and 1 input box. What I want to do is,

Box 1: Show the brand

Box 2: Show the model based on brand

Box 3: Parts available for repair (screen, battery, etc... it varies depends on the brand)

Box 4: Inputbox that shows the price.

Every phone part has its own price, so it should only populate the input box with the price once the brand, model, and the part has been selected.

So basically, when you select Apple -> iPhone 5 -> Screen, the input box should display the price for the screen, and so on...

I just cant figure out how to make this right.

I had to show a code in order to attach a fiddle.

<select name="devicelist" id="devicelist" style="width:350px;" onchange="changecat1(this.value);">
      <option value="" disabled selected>Select Brand</option>
      <option value="A">Apple</option>
      <option value="B">Blackberry</option>
      <option value="G">Google</option>
      <option value="H">Huawei</option>
      <option value="L">LG</option>
      <option value="M">Motorola</option>
      <option value="S">Samsung</option>
    </select>

Here's my JSFiddle.

Does this answer your question? [Dynamically Populating Drop down list from selection of another drop down value](https://stackoverflow.com/questions/30232146/dynamically-populating-drop-down-list-from-selection-of-another-drop-down-value) — divy3993, Jan 15 '20 at 07:04
@divy3993 I can only make that work on 2 dropdown boxes, unfortunately. — Foxseiz, Jan 15 '20 at 07:06
You may think it is an overkill but if you choose to build this simple form with Vue.js you will be surprised how easy it is. — IVO GELOV, Jan 15 '20 at 09:26
@Foxseiz I have created one [fiddle](https://jsfiddle.net/Jaydeep_Mor/1bwh0s8r/) for you. Could you please check it and tell me if anything wrong ? — Jaydeep Mor, Jan 16 '20 at 09:16
jaydeep, this is awesome, but how to clear input when you selected another brand? I have updated my fiddle also to change the Samsung parts but it doesn't matter anymore I guess. — Foxseiz, Jan 16 '20 at 13:22
@JaydeepMor please add it as the answer so I can mark it. thanks a lot. — Foxseiz, Jan 16 '20 at 16:00
Thank you @JaydeepMor, I figured out which line is missing thats why its not clearing the input. figured out that I have to add the updatePrice(); in the updateDrp. — Foxseiz, Jan 16 '20 at 16:15

score 0 · Answer 1 · answered Jan 16 '20 at 04:28

I hope this will answer your question

$(document).ready(function () {
    $("#type").change(function () {
        var val = $(this).val();
        if (val == "A") {
            $("#size").html("<option value='test1'>iPhone</option><option value='test2'>iPhone2</option>");
        } else if (val == "B") {
            $("#size").html("<option value='test2'>Blackberry1</option><option value='test2'>Blackberry2</option>");
        } else if (val == "C") {
            $("#size").html("<option value='test3'>item3: test 1</option><option value='test2'>item3: test 2</option>");
        } else if (val == "") {
            $("#size").html("<option value=''>--select one--</option>");
        }
    });
    
     $("#size").change(function () {
        var val = $(this).val();
        if (val == "test1") {
            $("#khind").html("<option value='test1'>Screen</option><option value='test2'>Battery</option>");
        } else if (val == "test2") {
            $("#khind").html("<option value='test2'>Front Camera</option><option value='test2'>back Front Camera</option>");
        } else if (val == "test3") {
            $("#khind").html("<option value='test3'>glass</option><option value='test2'>housing</option>");
        } else if (val == "item0") {
            $("#khind").html("<option value=''>--select one--</option>");
        }
    });
    
    $("#khind").change(function () {
        var val = $(this).val();
        if (val == "test1") {
            $("#price").html("<option value='test1'>$189.00</option><option value='test2'>$19.00</option>");
        } else if (val == "test2") {
            $("#price").html("<option value='test2'>$189.00</option><option value='test2'>$189.00</option>");
        } else if (val == "test3") {
            $("#price").html("<option value='test3'>$189.00</option><option value='test2'>item3: test 2</option>");
        } else if (val == "") {
            $("#price").html("<option value=''>--select one--</option>");
        }
    });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="type">
  <option value="" disabled selected>Select Brand</option>
  <option value="A">Apple</option>
  <option value="B">Blackberry</option>
  <option value="G">Google</option>
  <option value="H">Huawei</option>
  <option value="L">LG</option>
  <option value="M">Motorola</option>
  <option value="S">Samsung</option>
</select>

<select id="size">
    <option value="">-- select one -- </option>
</select>

<select id="khind">
    <option value="">-- select one -- </option>
</select>

<select id="price">
    <option value="">-- select one -- </option>
</select>

Hi, the 4th box should be an input box(disabled) and every phone part has their specific price. — Foxseiz, Jan 16 '20 at 05:14
What I'm trying to do is that this should be for people who want to check how much would be the repair price for their device. — Foxseiz, Jan 16 '20 at 05:25

How to populate 3 dropdown boxes and 1 input box based on my array? HTML Javascript

1 Answers1