How to Manipulate a Select Options Based on Another Select Option in HTML

$(document).ready(function () {    $("#type").change(function () {        var val = $(this).val();        if (val == "item1") {            $("#size").html("<option value='test'>item1: test 1</option><option value='test2'>item1: test 2</option>");        } else if (val == "item2") {            $("#size").html("<option value='test'>item2: test 1</option><option value='test2'>item2: test 2</option>");        } else if (val == "item3") {            $("#size").html("<option value='test'>item3: test 1</option><option value='test2'>item3: test 2</option>");        } else if (val == "item0") {            $("#size").html("<option value=''>--select one--</option>");        }    });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><select id="type">    <option value="item0">--Select an Item--</option>    <option value="item1">item1</option>    <option value="item2">item2</option>    <option value="item3">item3</option></select>
<select id="size">    <option value="">-- select one -- </option></select>

how to change a selections options based on another select option selected by vue js

Here is an example of how to do: https://codepen.io/antoniandre/pen/OJJQMGN?editors=1010

JS

new Vue({
  el: '#app',
  data: () => ({
    selection1: null,
    optionsList: ''
  }),

  methods: {
    changeSelect2 () {
      switch (this.selection1) {
          case 'item1':
            this.optionsList = '<option value="test">item1: test 1</option><option value="test2">item1: test 2</option>'
            break;
          case 'item2':
            this.optionsList = '<option value="test">item2: test 1</option><option value="test2">item2: test 2</option>'
            break;
          case 'item3':
            this.optionsList = '<option value="test">item3: test 1</option><option value="test2">item3: test 2</option>'
            break;
      }
    }
  }
})

HTML

<div id="app">
  <select @change="changeSelect2" v-model="selection1">
      <option value="item1">item1</option>
      <option value="item2">item2</option>
      <option value="item3">item3</option>
  </select>

  <select v-html="optionsList"></select>
</div>

But this is certainly not the cleanest way to do it I just converted your example as is.
To make it nicer, the options should be in a list probably.

Here is a little bit of tutorial to start and understand:

1. include Vue library
2. Never manipulate the DOM (unless no choice), Vue is DATA DRIVEN
3. listen for DOM events on DOM elements with @eventName
4. place your functions in methods, and your vars in data this is always like that
5. the v-model attribute is a 2 way binding and triggers the variable to change automatically when the select list selected option changes, this is called "reactivity".
6. place your variables in the html within v-html for HTML or mustaches {{ }} if you only want to keep its textual value and not HTML.
7. follow a few tutorials

How to manipulate selected option's value to be the same as option text with JavaScript

You need to pass decisions[i] as second parameter in Option.

Syntax:new Option(text, value, defaultSelected, selected); More details Option

var reasons = {};    reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X'];    reasons['Product Inquiry'] = ['Product Weight', 'Product Quality'];
    function ChangeTypeList() {        var typeList = document.getElementById("type");        var reasonsList = document.getElementById("reason");        var reasonsType = typeList.options[typeList.selectedIndex].value;
        while (reasonsList.options.length) {            reasonsList.remove(0);        }  var reason = document.getElementById('reason');        var decisions = reasons[reasonsType];        if (decisions) {            var i;            for (i = 0; i < decisions.length; i++) {    //This line is changed                var decision = new Option(decisions[i], decisions[i]);                reasonsList.options.add(decision);                console.log('decision', decision);            }        }    }

<label for="type">Category<span class="required-input"> *</span></label>    <select id="type" name="type" onchange="ChangeTypeList()">        <option value="">--Select--</option>        <option value="Order Inquiry">Order Inquiry</option>        <option value="Product Inquiry">Product Inquiry</option>    </select>
    <!-- Sub Category -->    <label for="reason">Sub Category</label>    <select id="reason" name="reason"></select>

"<option>item1...</option><option <?php echo .... 'selected'; ?> >item1...</option>"...

 $("#type").change();

 In the gist is this:

// Remove options
$("#selectBox option[value='option1']").remove();

// Add options
$("#selectBox").append('<option value="option6">option6</option>');

function getType() {  var x = document.getElementById("food").value;  var items;  if (x === "fruit") {    items = ["Apple", "Oranges", "Bananas"];  } else {    items = ["Eggplants", "Olives"]  }  var str = ""  for (var item of items) {    str += "<option>" + item + "</option>"  }  document.getElementById("pickone").innerHTML = str;}document.getElementById("btn").addEventListener("click", getType)

<input type="text" id="food"><button id="btn">click</button><select id="pickone"></select>

var $select = $('#abc,#xyz');$select.change(function() {  $select.val(this.value);}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><select name="abc" id="abc">  <option value="1">A</option>  <option value="2">B</option>  <option value="3">C</option></select><select name="xyz" id="xyz">  <option value="2">X</option>  <option value="3">Y</option>  <option value="1">Z</option></select>