javascript - 镜像多个选择字段 jquery/javascript-6ren

javascript - 镜像多个选择字段 jquery/javascript

转载作者：行者123 更新时间：2023-12-03 02:51:48

我是 JavaScript 和 HTML 新手，我想要实现以下结构:

[Drop down 1]
               [Option 1]
               [Option 2]
[Drop down 2]
               [Option 1]
               [Option 2]
..and so on

然后我希望选项反射(reflect)在下面的 TD 中，例如:

<td>&nbsp;</td><td class="sel1">Selected option from drop-down 1</td>
<td>&nbsp;</td><td class="sel2">Selected option from drop-down 2</td>
..and so on

更新:根据 Joshua Kisubi 的请求添加了 Jfiddle:https://jsfiddle.net/2ra5ptk1/1/

td {
  font-family: calibri;
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

select,
body {
  font-family: calibri;
  font-size: 14px;
}

<body>
  I need the selection from "Selection 1" to be outputted in the column to the right of "Results from selection 1" in the table below, and so on for each drop down. I don't know javascript or jQuery though, so I am not able to achieve this:<br><br>
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td>
        Selection 1:<br>
        <select class="selection1">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel1: Option 1</option>
                  <option value="option1">Sel1: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection2">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel2: Option 1</option>
                  <option value="option1">Sel2: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection3">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel3: Option 1</option>
                  <option value="option1">Sel3: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection4">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel4: Option 1</option>
                  <option value="option1">Sel4: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection5">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel5: Option 1</option>
                  <option value="option1">Sel5: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection6">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel6: Option 1</option>
                  <option value="option1">Sel6: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection7">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel7: Option 1</option>
                  <option value="option1">Sel7: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection8">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel8: Option 1</option>
                  <option value="option1">Sel8: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection9">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel9: Option 1</option>
                  <option value="option1">Sel9: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection10">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel10: Option 1</option>
                  <option value="option1">Sel10: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection11">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel11: Option 1</option>
                  <option value="option1">Sel11: Option 2</option>
                </select>
        <br><br>Selection 1:<br>
        <select class="selection12">
                  <option value="choose">[Choose]</option>
                  <option value="option2">Sel12: Option 1</option>
                  <option value="option1">Sel12: Option 2</option>
                </select>
      </td>
      <td>
        <table cellpadding="0" cellspacing="0">
          <tr>
            <td>Result from selection 1:</td>
            <td class="sel1">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 2:</td>
            <td class="sel2">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 3:</td>
            <td class="sel3">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 4:</td>
            <td class="sel4">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 5:</td>
            <td class="sel5">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 6:</td>
            <td class="sel6">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 7:</td>
            <td class="sel7">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 8:</td>
            <td class="sel8">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 9:</td>
            <td class="sel9">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 10:</td>
            <td class="sel10">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 11:</td>
            <td class="sel11">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 12:</td>
            <td class="sel12">RESULT HERE</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

任何人都可以给我任何关于如何实现此结果的提示或资源吗？

最佳答案

您在 html 中混淆了 id 和 class 的用法，因此很难在 javascript 中引用。使用 id 表示页面上的唯一元素，使用类表示相似的元素。这样您就可以立即附加一个事件处理程序来选择元素。当然，您可以使用 for 循环附加到 id 'sel'+ count 的选择，但这效率低下。

$(function() {
	$('.selection').on('change', function(){
		var sel_id = $(this).attr('data-id');
		var sel_opt = $(this).val();
    
		$('table td#'+sel_id).text(sel_opt)
	})
});

td {
  font-family:calibri;
  font-size:14px;
  border:1px solid rgba(0,0,0,0.2);
}

select, body {
    font-family:calibri;
  font-size:14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  I need the selection from "Selection 1" to be outputted in the column to the right of "Results from selection 1" in the table below, and so on for each drop down. I don't know javascript or jQuery though, so I am not able to achieve this:<br><br>
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td>

        Selection 1:<br>
        <select class="selection" data-id="sel1">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel1: Option 1</option>
          <option value="option1">Sel1: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel2">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel2: Option 1</option>
          <option value="option1">Sel2: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel3">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel3: Option 1</option>
          <option value="option1">Sel3: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel4">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel4: Option 1</option>
          <option value="option1">Sel4: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel5">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel5: Option 1</option>
          <option value="option1">Sel5: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel6">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel6: Option 1</option>
          <option value="option1">Sel6: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel7">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel7: Option 1</option>
          <option value="option1">Sel7: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel8">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel8: Option 1</option>
          <option value="option1">Sel8: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel9">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel9: Option 1</option>
          <option value="option1">Sel9: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel10">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel10: Option 1</option>
          <option value="option1">Sel10: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel11">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel11: Option 1</option>
          <option value="option1">Sel11: Option 2</option>
        </select>
        <br><br>Selection 1:<br>
        <select class="selection" data-id="sel12">
          <option value="choose">[Choose]</option>
          <option value="option2">Sel12: Option 1</option>
          <option value="option1">Sel12: Option 2</option>
        </select>

      </td><td>

        <table cellpadding="0" cellspacing="0">
          <tr>
            <td>Result from selection 1:</td><td id="sel1">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 2:</td><td id="sel2">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 3:</td><td id="sel3">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 4:</td><td id="sel4">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 5:</td><td id="sel5">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 6:</td><td id="sel6">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 7:</td><td id="sel7">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 8:</td><td id="sel8">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 9:</td><td id="sel9">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 10:</td><td id="sel10">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 11:</td><td id="sel11">RESULT HERE</td>
          </tr>
          <tr>
            <td>Result from selection 12:</td><td id="sel12">RESULT HERE</td>
          </tr>
        </table>

      </td>
    </tr>
  </table>

</body>

关于javascript - 镜像多个选择字段 jquery/javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47818327/

文章推荐： javascript - 第一次异常后继续测试 | Chai | Mocha

文章推荐： javascript - 可扩展列表未按预期工作

java - JPA 选择(选择)
是否有某种方法可以使用 JPA 或 Hibernate Crtiteria API 来表示这种 SQL？或者我应该将其作为 native 执行吗？ SELECT A.X FROM (SELECT X,
mysql - 选择 1 - 选择 2
在查询中， select id,name,feature,marks from (....) 我想删除其 id 在另一个 select 语句中存在的那些。从 (...) 中选择 id 我是 sql
javascript - 选择 HTML 选择/下拉列表中的项目时会触发什么事件？
我想响应用户在 select 元素中选择一个项目。然而这个 jQuery: $('#platypusDropDown').select(function () { alert('You sel
sql - 选择..来自(选择..来自..)。如何改进此查询？
这个问题在这里已经有了答案: SQL select only rows with max value on a column [duplicate] (27 个回答) 关闭8年前。我正在学习 SQL
php - mysqli查询(选择)不起作用(选择)php
This question already has answers here: “Notice: Undefined variable”, “Notice: Undefined index”, and
php - SQL - 如果存在 - 选择 A - 否则 - 选择 B
我在 php 脚本中调用 SQL。有时“DE”中没有值，如果是这种情况我想从“EN”中获取值应该是这样的，但不是这样的 IF (EXISTS (SELECT epf_application_deta
mysql - 选择 TableName.Col1 VS 选择 Col1
这可能是一个奇怪的问题，但不知道如何研究它。执行以下查询时: SELECT Foo.col1, Foo.col2, Foo.col3 FROM Foo INNER JOIN Bar ON
javascript - 如何在 phonegap 中同时使用相机 API 选择(选择)多张图像？
如何在使用 Camera.DestinationType.FILE_URI. 时在 phonegap camera API 中同时选择或拾取多个图像我能够一次只选择一张图像。我可以使用 this 在
sql-server - 如果存在(选择 1...)与如果存在(选择 TOP 1 1...)
这是一个纯粹的学术问题。这两个陈述实际上是否相同？ IF EXISTS (SELECT TOP 1 1 FROM Table1) SELECT 1 ELSE SELECT 0 相对 IF EXIS
java - JSoup 根据 Id 选择 Div，根据 title 选择 href
我使用 JSoup 来解析 HTML 响应。我有多个 Div 标签。我必须根据 ID 选择 Div 标签。我的伪代码是这样的 Document divTag = Jsoup.connect(link
JavaScript 选择
我正在处理一个具有多个选择框的表单。当用户从 selectbox1 中选择一个选项时，我需要 selectbox2 active 的另一个值。同样，当他选择 selectbox2 的另一个值时，我需要
jQuery 选择
Acme Inc. Christa Woods Charlotte Freeman Jeffrey Walton Ella Hubbard Se
php数据库连接/选择
我有一个login.html其中form定义如下: First Initial Plus Last Name : 我的do_authorize如下: "; pri
JavaScript 选择
$.get( 'http://www.ufilme.ro/api/load/maron_online/470', function(data
Javascript 选择
我有一个下拉列表“磅”、“克”、“千克”和“盎司”。我想要这样一种情况，当我选择 gram 来执行一个函数时，当我在输入字段中输入一个值时，当我选择 pounds 时，我想要另一个函数来执行时我在输入
GLSL channel 选择
我有一个 GLSL 着色器，它从输入纹理的 channel 之一(例如 R)读取，然后写入输出纹理中的同一 channel 。该 channel 必须由用户选择。我现在能想到的就是使用一个 int
html - 如何根据下拉列表中的选定数字生成表单输入字段(选择)
我想根据下拉列表中的选定值生成输入文本框。 Options 2 3 4 5 就在这个选择框之后，一些输入字段应该按照选定的数字出现。最佳答案我建议您使用响应式(Reac
优先选择列值的 SQL 选择
我是 SQL 新手，我想问一下如何根据首选项和分组选择条目。 +----------+----------+------+ | ENTRY_ID | ROUTE_ID | TYPE | +------
sql - 选择 * 进入失败
我有以下表结构: CREATE TABLE [dbo].[UTS_USERCLIENT_MAPPING_USER_LIST] ( [MAPPING_ID] [int] IDENTITY(1,1
vba 选择/删除除第一个以外的所有工作表
我在移除不必要的床单时遇到了问题。我查看了不同的论坛并将不同的解决方案混合在一起。此宏删除工作表(第一张工作表除外)。 Sub wrong() Dim sht As Object Applicati

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 镜像多个选择字段 jquery/javascript