如何 - 使第一个动态下拉列表必须从第二个下拉列表中进行选择？
[英]How to - Make 1st dynamic dropdown MUST to select from 2nd dropdown?
问题描述
Here what am trying to do is this that - i have a working dynamic dropdown set from mysql tables.
这里我想要做的是 - 我从 mysql 表中设置了一个有效的动态下拉列表。 I am trying to make 1st dropdown compulsory, to choose any options from 2nd dropdown.我试图强制第一个下拉列表，从第二个下拉列表中选择任何选项。 I am trying to pass selected option value from 1st dropdown, in 2nd dropdown change function & check if its empty.我试图从第一个下拉列表中传递选定的选项值，在第二个下拉更改函数中并检查它是否为空。
But no success yet.但还没有成功。 Here is the Code:这是代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function (e) {
$("#cat").change(function one () {
var textval = $(":selected", this).html();
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = 'page.php?cat=' + url + '&subcat=' + textval; // redirect
}
// store value of selected option in url. This value be paseed on to below function two();
// function two(url);
}) // cat change function ends
$("#subcat").change(function two() {
var numval = $(":selected", this).val();
//$("#aid").val(numval);
var textval2 = $(":selected", this).html();
//$('input[name=villa-name]').val(textval2);
window.location = window.location.href + '&subcat=' + numval;
})
});
</script>
</head>
<body>
</body>
</html>
Thanks in Advance.提前致谢。 Still wondering how to do this in jQuery ?仍然想知道如何在 jQuery 中做到这一点？
2 个解决方案
解决方案1
1 2016-07-09 14:38:49
$("#subcat").attr("disabled", "disabled"); $("#cat").change(function() { if ($("#cat option:selected").val() !== "---") { $("#subcat").removeAttr("disabled") } else { $("#subcat").attr("disabled", "disabled"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="cat"> <option value="---">Select one</option> <option value="1">One</option> <option value="2">Two</option> </select> <select id="subcat"> <option value="---">Select another</option> <option value="1">One</option> <option value="2">Two</option> </select>
Also, I'm assuming you want the contents of the second drop down to depend on the choice of the first dropdown.另外，我假设您希望第二个下拉列表的内容取决于第一个下拉列表的选择。 It seems like you're handling this logic server side.看起来您正在处理这个逻辑服务器端。 If you continue with that route, you could just have the second drop down disabled on the initial page load by adding a disabled="disabled" attribute to the subcategory element server side.如果您继续该路线，您可以通过向子类别元素服务器端添加disabled="disabled"属性来在初始页面加载时禁用第二个下拉菜单。
What I would recommend instead, because it avoids a full-page refresh, is to either have the server include a populated JavaScript object with all the possible categories and subcategories when the page loads, or adding an AJAX endpoint to request subcategories when the main category changes.我建议的替代方法是在页面加载时让服务器包含一个包含所有可能类别和子类别的已填充 JavaScript 对象，或者添加一个 AJAX 端点以在主类别加载时请求子类别变化。
The first option would have the server include something like the following in the response:第一个选项会让服务器在响应中包含如下内容：
<script type="text/javascript">
var categories = [
{
name: 'Category 1',
value: 'cat1',
children: [
{ name: 'Subcategory 1', value: 'sub1' },
{ name: 'Subcategory 2', value: 'sub2' },
]
},
{
name: 'Category 2',
value: 'cat2',
children: [
{ name: 'Subcategory 3', value: 'sub3' },
{ name: 'Subcategory 4', value: 'sub4' },
]
}
];
</script>
... so you could then change the above example to populate #cat from this array, and #subcat based on $('#cat option:selected').val() . ......所以你可以接着上面的例子改变填充#cat此数组中，并#subcat基于$('#cat option:selected').val() Something like the following:类似于以下内容：
$("#cat").html('<option value="---">Select one</option>'); $("#subcat").html('<option value="---">Select another</option>'); $("#subcat").attr("disabled", "disabled"); categories.forEach(function(cat) { var $cat = $("<option />") .val(cat.value) .html(cat.name); $("#cat").append($cat); }); $("#cat").change(function() { $("#subcat .subcat").remove(); $("#subcat").attr("disabled", "disabled"); var $selectedCategory = $('#cat option:selected'); if ($selectedCategory.val() !== "---") { $("#subcat").removeAttr("disabled"); var cat = categories.find(function(cat) { return cat.value === $selectedCategory.val(); }); if (cat.hasOwnProperty('children')) { cat.children.forEach(function(subcat) { var $subcat = $('<option class="subcat" />') .val(subcat.value) .html(subcat.name); $("#subcat").append($subcat); }); } } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> var categories = [ { name: 'Category 1', value: 'cat1', children: [ { name: 'Subcategory 1', value: 'sub1' }, { name: 'Subcategory 2', value: 'sub2' }, ] }, { name: 'Category 2', value: 'cat2', children: [ { name: 'Subcategory 3', value: 'sub3' }, { name: 'Subcategory 4', value: 'sub4' }, ] } ]; </script> <select id="cat"></select> <select id="subcat"></select>
解决方案2
0 2016-07-09 14:03:54
I'm not sure but if you're trying to build an URL from the selected value of your two drop down lists, you can do something like this.我不确定，但如果您尝试从两个下拉列表的选定值构建 URL，您可以执行以下操作。
var catWasSelected = false;
$("#cat").change(function() {
catWasSelected = true;
});
$("#subcat").change(function() {
if(catWasSelected){
var cat = $("#cat").val();
var subcat = $("#subcat").val();
window.location = 'page.php?cat=' + cat + '&subcat=' + subcat;
}else{
// set the subcategory back to default
// something like: $("#subcat").val("default");
alert("Please select a category");
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.