使用 jQuery 在表单提交上设置 select 值
Setting select value on form submit with jQuery
我试图在提交时设置一个 select 值,但我在声明函数和代码格式方面遇到了一些问题。希望大家帮帮忙!
<form>
<select>
<option value="1" data-parent="-1">Alt 1</option>
<option value="11" data-parent="1"> Alt 1.1</option>
<option value="12" data-parent="1"> Alt 1.2/option>
<option value="2" data-parent="-1">Alt 2</option>
<option value="21" data-parent="2"> Alt 2.1</option>
<option value="22" data-parent="2"> Alt 2.2</option>
<option value="23" data-parent="2"> Alt 2.3</option>
<option value="24" data-parent="2"> Alt 2.4option>
<option value="3" data-parent="-1">Alt 3</option>
<option value="31" data-parent="3"> Alt 3.1</option>
<option value="32" data-parent="3"> Alt 3.2</option>
</select>
<input type="submit" value="Submit">
</form>
$('form select').on('change', function(e) {
var optionSelected = $('option:selected', this);
var selectedOptionParent = $('option:selected', this).attr('data-parent');
var selectedValue = optionSelected.val();
var parentValue = $('option[value="' + selectedOptionParent + '"]', this).val();
var selectedValues = parentValue + ',' + selectedValue;
console.log('Registered value is ' + parentValue + ',' + selectedValue);
});
$('form input[type="submit"]').on('click', function(e) {
$('.modal-add-gallery-image select').val(selectedValues);
});
找到示例 fiddle
Demo 如果你想让它在另一个函数中访问,你需要在更改处理程序之外声明变量 selectedValues
。
var selectedValues;
$('form select').on('change', function(e) {
var optionSelected = $('option:selected', this);
var selectedOptionParent = $('option:selected', this).attr('data-parent');
var selectedValue = optionSelected.val();
var parentValue = $('option[value="' + selectedOptionParent + '"]', this).val();
selectedValues = parentValue + ',' + selectedValue; //setting its value
console.log('Registered value is ' + parentValue + ',' + selectedValue);
});
$('form').on('submit', function(e) {
console.log(selectedValues); //reading the value we set on change
e.preventDefault();
});
我试图在提交时设置一个 select 值,但我在声明函数和代码格式方面遇到了一些问题。希望大家帮帮忙!
<form>
<select>
<option value="1" data-parent="-1">Alt 1</option>
<option value="11" data-parent="1"> Alt 1.1</option>
<option value="12" data-parent="1"> Alt 1.2/option>
<option value="2" data-parent="-1">Alt 2</option>
<option value="21" data-parent="2"> Alt 2.1</option>
<option value="22" data-parent="2"> Alt 2.2</option>
<option value="23" data-parent="2"> Alt 2.3</option>
<option value="24" data-parent="2"> Alt 2.4option>
<option value="3" data-parent="-1">Alt 3</option>
<option value="31" data-parent="3"> Alt 3.1</option>
<option value="32" data-parent="3"> Alt 3.2</option>
</select>
<input type="submit" value="Submit">
</form>
$('form select').on('change', function(e) {
var optionSelected = $('option:selected', this);
var selectedOptionParent = $('option:selected', this).attr('data-parent');
var selectedValue = optionSelected.val();
var parentValue = $('option[value="' + selectedOptionParent + '"]', this).val();
var selectedValues = parentValue + ',' + selectedValue;
console.log('Registered value is ' + parentValue + ',' + selectedValue);
});
$('form input[type="submit"]').on('click', function(e) {
$('.modal-add-gallery-image select').val(selectedValues);
});
找到示例 fiddle
Demo 如果你想让它在另一个函数中访问,你需要在更改处理程序之外声明变量 selectedValues
。
var selectedValues;
$('form select').on('change', function(e) {
var optionSelected = $('option:selected', this);
var selectedOptionParent = $('option:selected', this).attr('data-parent');
var selectedValue = optionSelected.val();
var parentValue = $('option[value="' + selectedOptionParent + '"]', this).val();
selectedValues = parentValue + ',' + selectedValue; //setting its value
console.log('Registered value is ' + parentValue + ',' + selectedValue);
});
$('form').on('submit', function(e) {
console.log(selectedValues); //reading the value we set on change
e.preventDefault();
});