在下拉列表中用自己的类清除文本字段更改值JQuery

Question

我希望在每次选择的CHANGED VALUE上，所有相关类的分组文本框都为空值我尝试使用这个简单的代码，但没有成功。请帮助我，并提前表示感谢。

$(document).ready(function () {
$("#FormPallet" + $(this).val()).on("change", function () {
			$(".FormCollo" + $(this).val()).val("");
		});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<div id="wrapper">
<div id="content">
<p>
<label> Dropdown :</label>
<select id="FormPallet1">
<option value="1">value_1</option>
<option value="2">value_2</option>
</select>
</p>
<p>
<label>Name : </label>
<input class="FormCollo1" type="text" />
</p>
<p>
<label>Reference ID : </label>
<input class="FormCollo1" type="text" />
</p>
<p>
<label>Amount : </label>
<input class="FormCollo1" type="text" />
</p>
</div>
</div>
<br />
<p style="color: red;">second block</p>
<br />
<div id="wrapper">
<div id="content">
<p>
<label> Dropdown :</label>
<select id="FormPallet2">
<option value="1">value_1</option>
<option value="2">value_2</option>
</select>
</p>
<p>
<label>Name : </label>
<input class="FormCollo2" type="text" />
</p>
<p>
<label>Reference ID : </label>
<input class="FormCollo2" type="text" />
</p>
<p>
<label>Amount : </label>
<input class="FormCollo2" type="text" />
</p>
</div>
</div>
</form>

Answer 1

如果不引用任何元素，就无法访问$this。因此$("#FormPallet" + $(this).val()).on中的$(this).val()将不被定义，

这样它将工作

$(document).ready(function () {
$("#FormPallet1,#FormPallet2").on("change", function () {
			$(".FormCollo" + $(this).val()).val("");
		});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
<div id="wrapper">
<div id="content">
<p>
<label> Dropdown :</label>
<select id="FormPallet1">
<option value="1">value_1</option>
<option value="2">value_2</option>
</select>
</p>
<p>
<label>Name : </label>
<input class="FormCollo1" type="text" />
</p>
<p>
<label>Reference ID : </label>
<input class="FormCollo1" type="text" />
</p>
<p>
<label>Amount : </label>
<input class="FormCollo1" type="text" />
</p>
</div>
</div>
<br />
<p style="color: red;">second block</p>
<br />
<div id="wrapper">
<div id="content">
<p>
<label> Dropdown :</label>
<select id="FormPallet2">
<option value="1">value_1</option>
<option value="2">value_2</option>
</select>
</p>
<p>
<label>Name : </label>
<input class="FormCollo2" type="text" />
</p>
<p>
<label>Reference ID : </label>
<input class="FormCollo2" type="text" />
</p>
<p>
<label>Amount : </label>
<input class="FormCollo2" type="text" />
</p>
</div>
</div>
</form>

Answer 2

我在这里看到了一些东西。。。

首先，第一次使用$(this).val()并没有真正起到任何作用，因为您所处的document.ready处理程序的上下文中没有的值。听起来您想要的是针对所有select元素，以其id中的给定字符串开头。大概是这样的：

$("[id^=FormPallet]").on("change", function () {
//...
});

从那里开始，您不希望根据select的值来选择要清空的项，而是根据select的DOM中的<em]位置。否则，在第一个select中选择"2"将导致第二个表单被清空。>

从"当前"元素导航到通用父元素，然后在其中找到目标元素。类似这样的东西：

$(this).closest('div').find('input').val('');

这将在最直接包含的CCD_ 12元素中找到所有CCD_。下面是一个运行示例。

---

附带说明：您在HTML中使用相同的id值。虽然在这种特殊情况下，JavaScript代码并不依赖于此，应该仍然有效，但这仍然是您需要解决的问题。无效的HTML会导致未定义的JavaScript行为。