Question

说实在的，我真的不知道如何表达这个问题。我对网页和开发还很陌生，需要一些帮助来解决问题。我一直在寻找解决方案，但是我没有专门的术语来促进高效的查询。

我正在提交一个表单，其中有些内容是必需的，而有些内容我只想组合提交。采取以下

<label>First Name<input type="text" size="20" name="f_name"></label>
<label>Last Name<input type="text" size="20" name="f_name"></label>
<dl>
 <dt>Enter one of the following combinations</dt>
 <dd>
  <label>Age<input type="text" size="10" name="age"></label>
  <label>Sex<input type="text" size="10" name="sex"></label>
  <label>Address<input type="text" size="40" name="location"></label>
 </dd>
 <dd>
  <label>File Number<input type="text" size="10" name="f_num"></label>
 </dd>
 <dd>
  <label>A<input type="text" size="10" name="A"></label>
  <label>B<input type="text" size="10" name="B"></label>
  <label>C<input type="text" size="10" name="C"></label>
 </dd>
</dl>

是否可能将输入字段之一修改为使用javascript删除其他dd组合？

Answer 1

这是一个使用jQuery的简单示例：

首先将class添加到元素组。在这里，我刚刚添加了一个名为dd的类，但是它可以是任何东西。 HTML：

<label>First Name<input type="text" size="20" name="f_name"></label>
<label>Last Name<input type="text" size="20" name="f_name"></label>
<dl id="dl">
 <dt>Enter one of the following combinations</dt>
 <dd class="dd">
  <label>Age<input type="text" size="10" name="age"></label>
  <label>Sex<input type="text" size="10" name="sex"></label>
  <label>Address<input type="text" size="40" name="location"></label>
 </dd>
 <dd class="dd">
  <label>File Number<input type="text" size="10" name="f_num"></label>
 </dd>
 <dd class="dd">
  <label>A<input type="text" size="10" name="A"></label>
  <label>B<input type="text" size="10" name="B"></label>
  <label>C<input type="text" size="10" name="C"></label>
 </dd>
</dl>

然后，我们使用jQuery使用类选择器查找那些元素，拉出输入，并在输入中放置用于keyup事件的事件侦听器。收到一个分组后，隐藏所有分组，然后仅显示触发事件的当前分组。

jQuery：

$( document ).ready(function() {
  $('.dd').find('input').keyup(function (ev, val) {
    $('.dd').hide()
    $(ev.target).closest('.dd').show()
  })
})

您需要研究如何开始使用jQuery才能将其包含在HTML页面中。

Answer 2

您可以将toggleClass()与布尔值一起使用，以在您需要的逻辑情况下强制该类（不存在）。

// find an input event on all the dds, to get the events that bubble up
var $dds = $('dd').on('input', function(e){
  // the other elements should be disabled if this element has a value
  var hideOtherDDs = e.target.value.trim();
  
  // toggle the hidden state of the other dds, but only if they should be hidden
  $dds.not(this).toggleClass('hidden', !!hideOtherDDs);
});

.hidden { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>First Name<input type="text" size="20" name="f_name"></label>
<label>Last Name<input type="text" size="20" name="f_name"></label>
<dl>
 <dt>Enter one of the following combinations</dt>
 <dd>
  <label>Age<input type="text" size="10" name="age"></label>
  <label>Sex<input type="text" size="10" name="sex"></label>
  <label>Address<input type="text" size="40" name="location"></label>
 </dd>
 <dd>
  <label>File Number<input type="text" size="10" name="f_num"></label>
 </dd>
 <dd>
  <label>A<input type="text" size="10" name="A"></label>
  <label>B<input type="text" size="10" name="B"></label>
  <label>C<input type="text" size="10" name="C"></label>
 </dd>
</dl>

删除“或”类型选择中的其他元素

2 个答案: