使用 AJAX Chained Dropdown 在 Form Modal Bootstrap 上设置所选选项
set selected option on Form Modal Bootstrap with AJAX Chained Dropdown
我在 bootstrap 模态
上的链接下拉菜单有问题
这是我的代码:
function edit(id) {
var id = id;
$('#edit').prop('hidden', true);
$('#modal_form').prop('hidden', false);
/* $.ajax ({
type: 'POST',
data: {id : id},
url: 'http://localhost/master',
success: function(response) { */
response = {
id: 1,
select1: 'B',
select2: 'B3'
};
$('#select1').val(response.select1);
getSelect2(response.select1);
$('#select2').val(response.select2);
}
function getSelect2(select1) {
var select1 = select1;
/* $.ajax ({
type: 'POST',
data: {select1 : select1},
url: 'http://localhost/master',
success: function(response) { */
response = '<option value="B1">B1</option><option value="B2">B2</option><option value="B3">B3</option>'
$('#select2').html(response);
/* }
}); */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Click edit to show up modal form from bootstrap 4 (lets's pretend it has showed up)
<br><br>
<a href="javascript:void(0);" onclick="edit(id)" id="edit">Edit</a>
<!-- Lets' pretend This dropdown select will aprear on bootstrap modal when user click edit lol :D -->
<br><br>
<div id="modal_form" hidden="true">
<label for="select1">Select1 :</label>
<select class="custom-select" id="select1" name="select1" onclick="getSelect2(this.value)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<label for="select2">Select2 :</label>
<select class="custom-select" id="select2" name="select2">
</select>
<br><br>
<a href="javascript:void(0);" id="save">Save</a>
</div>
我的目标是:当用户单击编辑按钮时,让假装的 boostrap 模式弹出,然后用户可以根据 AJAX 来自后端数据的结果
查看所选选项
在这种情况下 Select1 个选择的值应该是 "B",Select2 个选择的值应该是 "B3"
我尝试了以下这些帮助,但仍然没有得到我想要的
link1 , link2 , link3 , link3
但#select2 仍未被选中
经过数小时的调试,发现 response 需要存储到 var 中
这是有效的解决方案:
function edit(id) {
var id = id;
$('#edit').prop('hidden', true);
$('#modal_form').prop('hidden', false);
/* $.ajax ({
type: 'POST',
data: {id : id},
url: 'http://localhost/master',
success: function(response) { */
response = {
id: 1,
select1: 'B',
select2: 'B3'
};
$('#select1').val(response.select1);
getSelect2(response.select1);
$('#select2').val(response.select2);
}
function getSelect2(select1) {
var select1 = select1;
/* $.ajax ({
type: 'POST',
data: {select1 : select1},
url: 'http://localhost/master',
success: function(response) { */
var response = '<option value="B1">B1</option><option value="B2">B2</option><option value="B3">B3</option>'
$('#select2').html(response);
/* }
}); */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Click edit to show up modal form from bootstrap 4 (lets's pretend it has showed up)
<br><br>
<a href="javascript:void(0);" onclick="edit(id)" id="edit">Edit</a>
<!-- Lets' pretend This dropdown select will aprear on bootstrap modal when user click edit lol :D -->
<br><br>
<div id="modal_form" hidden="true">
<label for="select1">Select1 :</label>
<select class="custom-select" id="select1" name="select1" onclick="getSelect2(this.value)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<label for="select2">Select2 :</label>
<select class="custom-select" id="select2" name="select2">
</select>
<br><br>
<a href="javascript:void(0);" id="save">Save</a>
</div>
我在 bootstrap 模态
上的链接下拉菜单有问题这是我的代码:
function edit(id) {
var id = id;
$('#edit').prop('hidden', true);
$('#modal_form').prop('hidden', false);
/* $.ajax ({
type: 'POST',
data: {id : id},
url: 'http://localhost/master',
success: function(response) { */
response = {
id: 1,
select1: 'B',
select2: 'B3'
};
$('#select1').val(response.select1);
getSelect2(response.select1);
$('#select2').val(response.select2);
}
function getSelect2(select1) {
var select1 = select1;
/* $.ajax ({
type: 'POST',
data: {select1 : select1},
url: 'http://localhost/master',
success: function(response) { */
response = '<option value="B1">B1</option><option value="B2">B2</option><option value="B3">B3</option>'
$('#select2').html(response);
/* }
}); */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Click edit to show up modal form from bootstrap 4 (lets's pretend it has showed up)
<br><br>
<a href="javascript:void(0);" onclick="edit(id)" id="edit">Edit</a>
<!-- Lets' pretend This dropdown select will aprear on bootstrap modal when user click edit lol :D -->
<br><br>
<div id="modal_form" hidden="true">
<label for="select1">Select1 :</label>
<select class="custom-select" id="select1" name="select1" onclick="getSelect2(this.value)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<label for="select2">Select2 :</label>
<select class="custom-select" id="select2" name="select2">
</select>
<br><br>
<a href="javascript:void(0);" id="save">Save</a>
</div>
我的目标是:当用户单击编辑按钮时,让假装的 boostrap 模式弹出,然后用户可以根据 AJAX 来自后端数据的结果
查看所选选项在这种情况下 Select1 个选择的值应该是 "B",Select2 个选择的值应该是 "B3"
我尝试了以下这些帮助,但仍然没有得到我想要的
link1 , link2 , link3 , link3
但#select2 仍未被选中
经过数小时的调试,发现 response 需要存储到 var 中 这是有效的解决方案:
function edit(id) {
var id = id;
$('#edit').prop('hidden', true);
$('#modal_form').prop('hidden', false);
/* $.ajax ({
type: 'POST',
data: {id : id},
url: 'http://localhost/master',
success: function(response) { */
response = {
id: 1,
select1: 'B',
select2: 'B3'
};
$('#select1').val(response.select1);
getSelect2(response.select1);
$('#select2').val(response.select2);
}
function getSelect2(select1) {
var select1 = select1;
/* $.ajax ({
type: 'POST',
data: {select1 : select1},
url: 'http://localhost/master',
success: function(response) { */
var response = '<option value="B1">B1</option><option value="B2">B2</option><option value="B3">B3</option>'
$('#select2').html(response);
/* }
}); */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Click edit to show up modal form from bootstrap 4 (lets's pretend it has showed up)
<br><br>
<a href="javascript:void(0);" onclick="edit(id)" id="edit">Edit</a>
<!-- Lets' pretend This dropdown select will aprear on bootstrap modal when user click edit lol :D -->
<br><br>
<div id="modal_form" hidden="true">
<label for="select1">Select1 :</label>
<select class="custom-select" id="select1" name="select1" onclick="getSelect2(this.value)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<label for="select2">Select2 :</label>
<select class="custom-select" id="select2" name="select2">
</select>
<br><br>
<a href="javascript:void(0);" id="save">Save</a>
</div>