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

Posted 2023-05-09

【中文标题】在 JavaScript 中选择匹配的动态字段

【英文标题】：Selecting matching Dynamic field in JavaScript

【发布时间】：2021-06-14 10:42:22

【问题描述】：

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

请在此处查看小提琴链接：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>

【问题讨论】：

你可以查看jsfiddle.net/bvh6c391/1

非常感谢！这也有很大帮助。非常感谢！

似乎您使用带有选项值的单选按钮值进行检查，这些值现在已修复上述小提琴。

【参考方案1】：

您可以获取已检查的无线电值，然后使用具有该值的 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>

【讨论】：

非常感谢！这行得通。我非常感激。在我仍然单击添加按钮后，我无法让它显示在待办事项列表中，但我会继续尝试解决这个问题。谢谢！

I can't get it show up in the To Do list after I click the add button still, but will keep trying to figure that out.. 请详细说明 :) 也会帮助你。

谢谢！单击添加按钮后，我无法将任何表单项从“添加”部分显示到“待办事项”部分。我将变量 var taskInput 用于第一个有效的变量，但将 var taskDescrInput 和 var startDateInput 等用于其他表单选项不起作用。任何帮助将不胜感激！

看到这个fiddle 我已经完成了日期和无线电输入，现在你只需要对其他做同样的事情。创建输入并从输入中获取值并将其添加到您的 dom 中。

非常感谢！对此，我真的非常感激。我试图弄清楚你是如何让它适用于日期和无线电输入的，并将尝试对其余的做同样的事情！希望我能让它工作。这可能需要我一段时间，但希望我能得到它。再次感谢您的帮助！