Question

当我做任何下拉选择时，我正在尝试使用我的JS脚本更改cshtml文件中的输入标签。我已经按照文档 - 但我没有得到预期的结果。没有编译或运行时错误 - 我已经删除了任何我认为没有必要让你看到的东西。如果我遗漏了一些东西，请告诉我。

HTML：

<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />

<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>

JS：

$(document).ready(function () {
  $('#searchByInput').change(searchByDropDownSelectionChange)
})

function searchByDropDownSelectionChange() {
  $('#entryFieldInputLabel').text('Changed')
}

我删除了许多表格行标记，并且数据源也正确加载。我预计会发生这样的情况：当下拉(#searchByInput)更改时，标签(#entryFieldInputLabel)上的文字会更改为“已更改”

Answer 1

使用html选择器代替text（td没有文字属性）：

＆＃13;

$(document).ready(function () {
  $('#searchByInput').change(searchByDropDownSelectionChange)
})

function searchByDropDownSelectionChange() {
  $('#entryFieldInputLabel').html('Changed');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
  <tr><td id="entryFieldInputLabel" class="inputLabel" align="right">1234</td>
</tr>
</table>

＆＃13;

如果你在表td

中使用span会更好

＆＃13;

$(document).ready(function () {
  $('#searchByInput').change(searchByDropDownSelectionChange)
})

function searchByDropDownSelectionChange() {
  $('#entryFieldInputLabel span').html('Changed')
}

/*
or simply
 $('#searchByInput').change(function(){
      $('#entryFieldInputLabel').html('Changed');
  })
  
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />
<table>
  <tr><td id="entryFieldInputLabel" class="inputLabel" align="right"><span>123</span></td>
</tr>
</table>

＆＃13;

Answer 2

您只需添加<table>标记，以便jQuery可以选择您的<td>代码ID

<table>
    <tr>
        <td id=""></td>
    </tr>
</table>

$(document).ready(function () {
	$('#searchByInput').change(searchByDropDownSelectionChange);

	function searchByDropDownSelectionChange() {
		$('#entryFieldInputLabel').text('Changed!');
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="searchByInput" class="rptInputBxWidth" data-role="dropdownlist" data-text-field="Value" data-value-field="Key" data-bind="value:searchBys_Value, enabled:searchBys_Enabled, source:searchBys_Source " data-option-label="SELECT" data-auto-bind="false" data-value-primitive="true" />

<table>
	<tr>
		<td id="entryFieldInputLabel" class="inputLabel" align="right">123456</td>
	</tr>
</table>

Answer 3

此问题已解决，可以关闭。提供的解决方案都重申了问题不在我提供的代码中。在实验之后，按照＆＃34;改变＆＃34;的顺序找到解决方案。调用是在JS ready函数中完成的。

这个特殊的调用需要在加载页面特定的HTML之后，但在kendo数据被ID绑定之前进行。

JS w / Kendo：在下拉选择更改

3 个答案: