Selecting matching Dynamic field in JavaScript

user_15120003 0
Viewed 97

I am trying to select a radio option in a form, and then have the matching dropdown option dynamically selected. I.e., How do I select 'work' in the radio options, and dynamically automatically select 'work' in the dropdown? I am struggling with figuring out how to get this code to work. Ultimately, I would also like to change the colour of each option as it is selected.

Please see fiddle link here: https://jsfiddle.net/rs26nfk1/

<div class="container"> <p>

        <div contenteditable="true" id="myContent">

<form method="POST" action="..." onsubmit="return checkForm(this);">
<label for="new-task">Add</label><input id="new-task" type="text" placeholder="Task Name..."><br>
<label for="task-descr"></label><input id="task-descr" type="text" placeholder="Task Description..."><br>
<label>Date: <input type="text" size="12" placeholder="dd/mm/yyyy" name="startdate" id="startdate">
    <!--<small>(dd/mm/yyyy)</small>-->
    </label><br>
<input id="urgent" type="checkbox"><label for="urgent">Urgent</label><br>

<input type="radio" id="groceries" name="category" value="groceries">
<label for="groceries">Groceries</label>
<input type="radio" id="work" name="category" value="work">
<label for="work">Work</label>
<input type="radio" id="chores" name="category" value="other">
<label for="chores">Chores</label>
<input type="radio" id="finance" name="category" value="other">
<label for="finance">Finance</label>

<form>
    <br>
    Select your category:
    <select id="mySelect">
      <option>Groceries</option>
      <option>Work</option>
      <option>Chores</option>
      <option>Finance</option>
    </select>
    <br><br>
    <input type="button" onclick="getOption()" value="Click Me!">
    </form>
    
    <p id="demo"></p>

</form>

<!--Task Order-->

<button input type="button" onclick="getOption()" value="Click Me!">Add</button>

</form>
</p>
<h3>To Do</h3>
<ul id="incomplete-tasks">

</ul>

<h3>Completed</h3>
<ul id="completed-tasks">


</ul></div>

</div>

<script type="text/javascript">
jQuery(document).ready(function ($) {
    $(document).on('change', 'select[name="item_meta[work]"]', function () {
        var lookup_val = $(this).val();

        $("select[name='item_meta[mySelect]'] option").filter(function () {
            return $(this).text() === lookup_val;
        }).first().prop('selected', true).siblings().prop('selected', false);

        $("select[name='item_meta[mySelect]']").trigger({ type:'change', originalEvent:'custom' });
    });
});
</script>
dynamic forms html jquery javascript
1 Answers

You can get value of radio which is been checked then using that value find option which has that value and add prop('selected', true); to that option.

Demo Code :

//onchange of input rado
$(document).on('change', 'input[name=category]', function() {
  var lookup_val = $(this).val(); //get  val
  //add slected
  $("select#mySelect").find("option:contains(" + lookup_val + ")").prop('selected', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<form method="POST" action="..." onsubmit="return checkForm(this);">
  <label for="new-task">Add</label><input id="new-task" type="text" placeholder="Task Name..."><br>
  <label for="task-descr"></label><input id="task-descr" type="text" placeholder="Task Description..."><br>
  <label>Date: <input type="text" size="12" placeholder="dd/mm/yyyy" name="startdate" id="startdate">
    <!--<small>(dd/mm/yyyy)</small>-->
    </label><br>
  <input id="urgent" type="checkbox"><label for="urgent">Urgent</label><br>

  <input type="radio" id="groceries" name="category" value="Groceries">
  <label for="groceries">Groceries</label>
  <input type="radio" id="work" name="category" value="Work">
  <label for="work">Work</label>
  <input type="radio" id="chores" name="category" value="Chores">
  <label for="chores">Chores</label>
  <input type="radio" id="finance" name="category" value="Finance">
  <label for="finance">Finance</label>

  <form>
    <br> Select your category:
    <select id="mySelect">
      <option>Groceries</option>
      <option>Work</option>
      <option>Chores</option>
      <option>Finance</option>
    </select>
    <br><br>
    <input type="button" onclick="getOption()" value="Click Me!">
  </form>

user_106064000
Related