Question

我希望在每个选择中的CHANGED VALUE上，相关类的所有自己的分组文本框都会变为空白值我试过这个简单的代码，但没有成功。请提前帮助我，多多谢意。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您无法在不参考任何元素的情况下访问$this。$(this).val()中的$("#FormPallet" + $(this).val()).on将无法定义，

这样就可以了

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我在这里看到几件事......

首先，你第一次使用$(this).val()并没有真正做任何事情，因为你在document.ready处理程序的上下文中没有拥有值。听起来你想要的是定位所有select元素以开头 id中的给定字符串。这将是这样的：

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

从那里开始，您不希望将项目的选择基于select的值，而是基于DOM中的位置< {em} of select。否则，在第一个select中选择“2”将导致第二个表格被清空。

从“current”元素，向上导航到公共父元素，然后在其中找到目标元素。像这样：

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

这将找到最直接包含input元素的所有div个元素。 Here's a running example

附注：您在HTML中重复使用相同的id值。虽然在这种特殊情况下，JavaScript代码并不依赖于它，仍然可以工作，但这仍然是你想要解决的问题。无效的HTML会导致未定义的JavaScript行为。

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

2 个答案: