javascript - 在 JavaScript 中选择匹配的动态字段

Question

我试图在表单中选择一个单选选项，然后动态选择匹配的下拉选项。 即，如何在单选选项中选择“工作”，并在下拉列表中动态自动选择“工作”？我正在努力弄清楚如何让这段代码工作。最后，我还想在每个选项被选中时更改它的颜色。

请在此处查看 fiddle 链接: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>

Answer 1

您可以获取已检查的 radio 值，然后使用具有该值的值 find 选项并将 prop('selected', true); 添加到该值选项。

演示代码:

//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>