Javascript 在单击时将输入值更改为单击按钮的同一行上的值
Javascript change input values onclick to the value on the same row which the button was clicked
假设我在第三行选择浮动汇率并单击等号按钮。所有其他行的其余值将更改其值为浮动速率。我也想将 tis 函数应用于所有其他行。
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$('.equal').on('click', function() {
$('.dropDown').val('Floating Rate');
})
});
</script>
桌子:
<td>
<select class="dropDown" style="width:150px" name="rate_value_1">
<option value="<?php echo $_SESSION['rate_value_1'] ;?>"><?php echo $_SESSION['rate_value_1'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="button" value="select" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_2">
<option value="<?php echo $_SESSION['rate_value_2'] ;?>"><?php echo $_SESSION['rate_value_2'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="button" value="select" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_3">
<option value="<?php echo $_SESSION['rate_value_3'] ;?>"><?php echo $_SESSION['rate_value_3'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="button" value="select" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_4">
<option value="<?php echo $_SESSION['rate_value_4'] ;?>"><?php echo $_SESSION['rate_value_4'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="button" value="select" class="equal" /></td>
in jquery,
$('.dropDown').change(function(e) {
//Here you can do you programming
console.log(e.currentTarget);
});
欲了解更多信息,
http://api.jquery.com/change/
$("#dropDown").change(function () {
var str = "";
$("#dropDown option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
你有很多问题。首先,你不能多次使用 id="dropDown"。请改用class="dropDown"。其次,一个建议是使用按钮而不是 img。
这是 js:
<script type="text/javascript">
$(document).ready(function() {
$('.equal').on('click', function() {
$('.dropDown').val('Floating Rate');
})
});
</script>
和 html 更改:
<select class="dropDown" style="width:150px" name="rate_value_1">
<input type="button" value="select" class="equal" />
好的,
Psinyee,这是你想要的,也解释了。
<script type="text/javascript">
$(document).ready(function() {
$('.equal').on('click', function() {
// find coresponding dropdown
// with select inside (this is the button ->parent is the td-> previous td)
var crtDropdown = $('select', $(this).parent().prev('td'));
if(crtDropdown.prop('selectedIndex') > 0) {
// something is selected, not first option
// change values for following selects
// select ->parent td->parent tr->all next trs->select inside trs->set val to crtDropdown.val();
crtDropdown.parent().parent().nextAll('tr').find('select').val(crtDropdown.val());
}
})
});
</script>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_1">
<option value="<?php echo $_SESSION['rate_value_1'] ;?>"><?php echo $_SESSION['rate_value_1'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="image" src="equal_button.png" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_2">
<option value="<?php echo $_SESSION['rate_value_2'] ;?>"><?php echo $_SESSION['rate_value_2'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="image" src="equal_button.png" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_3">
<option value="<?php echo $_SESSION['rate_value_3'] ;?>"><?php echo $_SESSION['rate_value_3'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="image" src="equal_button.png" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_4">
<option value="<?php echo $_SESSION['rate_value_4'] ;?>"><?php echo $_SESSION['rate_value_4'] ;?></option>
<option value="Fixed Rate">Fixed Rate</option>
<option value="Floating Rate">Floating Rate</option>
</select>
</td>
<td><input type="image" src="equal_button.png" class="equal" /></td>
</tr>
</table>
</form>
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 在GridView中,当单击复选框时,在网格的同一行中使用JavaScript将标签中的值添加到TextBox
- 从 html 表中选择一行(突出显示)并在单击按钮时发送值
- 如何找出单击了哪一行
- 仅单击一行中的一个项目
- 在表格最后一行(链接)中显示菜单,并在单击菜单项时显示模式窗口
- 递归可防止函数在一行中被多次单击
- 单击同一行中的任何复选框时,选中/取消选中表行中的复选框
- 单击按钮时删除一行
- 单击编辑按钮时,如何使用 jquery 从循环表的每一行传递 id
- 单击“单击”jqgrid“多选缺少最后一行
- 我想单击一个按钮,一次只执行已经制作的程序中的一行代码.(JavaScript)
- Javascript 在单击时将输入值更改为单击按钮的同一行上的值
- 通过单击删除同一行中存在的链接来删除特定行
- 如何获取新表行仅当先前输入的一行不为空时才单击
- jqxTreeGrid如果我单击一行中的特定单元格,则禁用对该行的选择/取消选择
- 单击一行时重定向到操作的正确方式(onclick)Yii2
- 当用户单击一行时,将数据发送到新的JSP页面
- 无法单击一行并调用javascript函数
- 如何通过单击一行中的按钮来更改html表的一行的颜色