Javascript 如何在“选择”下拉列表中显示单个和多个复选框，在“选择”下拉列表中将值解析为复选框

我有三个DIV，第一个DIV是一个下拉选择DIV，有一个、多个和无

我想要什么：

在“一”选项中，我希望它在第三个分区中显示一个复选框，以便用户只选中一个复选框；在“多”选项中，我希望它只显示带有多个选择的复选框；在“无”选项中，我希望它在第三个分区中显示一个复选框，以便用户只选中一个复选框

最后，在第二个DIV中，我有一个select下拉列表，其中包含javascript值和我想要的数组列表。当选择任何下拉列表时，它应该在第三个DIV中将值列表解析为checkbox

您有多少个物理位置*
选择物理位置的编号
一个
倍数
无（仅限在线）

var子类型列表=新数组（4）；
子类型列表[“空”]=“选择业务的子类型”]；
子列表[“球类运动”]=[“足球”、“篮球”、“排球”、“网球”、“板球”、“保龄球”、“美式足球”、“红宝石”、“手球”、“水球”、“高尔夫”]；
子列表[“极限运动”]=[“跳伞”、“拉链”、“蹦极”、“空气隧道”、“沙丘撞击”、“伞帆”、“跑酷”、“滑翔”]；
子列表[“娱乐”]=[“惊险公园”、“虚拟现实公园”、“鬼屋”、“彩弹”、“卡洛克”、“站立”、“动物互动”、“狩猎”、“水族馆”、“体验”]；
子列表[“摩托化运动”]=[“卡丁车”、“亚视和汽车租赁”、“赛道比赛”、“越野自行车”]；
子列表[“水上运动”]=[“水上运动”、“冲浪”、“游泳”、“水上滑板”、“潜水”、“钓鱼”]；
子列表[“技能”]=“艺术与手工艺”、“马术”、“猎鹰术”、“射箭术”、“音乐课”、“国际象棋课”、“一般工作坊”]；
子列表[“力量与敏捷”]=“武术”、“健身”、“舞蹈”、“力量”、“击剑”]；
子列表[“儿童”]=“教育研讨会”、“乐趣与冒险体验”、“讲故事”、“儿童总体爱好”]；
函数类别更改（selectObj）{
//获取所选选项的索引
var idx=selectObj.selectedIndex；
//获取所选选项的值
var=selectObj.options[idx].value；
//使用所选选项值从子列表数组中检索项目列表
cList=子列表[其中]；
//通过其已知id获取country select元素
var cSelect=document.getElementById（“子类型”）；
//从国家/地区选择中删除当前选项
var len=cSelect.options.length；
而（cSelect.options.length>0）{
cSelect.remove（0）；
} 
var新期权；
//创建新选项
对于（var i=0；i
商业的子类型？

只需在javascript中创建包装元素并操作dom。您要查找的一些函数是document.CreateElement（）、element.setAttribute（）和parentNode.append（）。

您的代码有什么问题？换句话说，您的代码在什么程度上没有达到预期的效果？1.在“一”上选择我希望它在第三个DIV中显示一个复选框，让用户只选中一个复选框，在“多个”选择中，我希望它只显示多个选择的复选框，在“无”上选择我希望它在第三部分中显示一个复选框，让用户只选中一个复选框。2.最后，在第二部分中，我有一个选择下拉列表，其中包含javascript值和我想要的数组列表。当选择任何下拉列表时，它应该解析第三部分中复选框的值列表。您应该将需求分解为小任务。研究如何完成一项特定任务，当你的代码无法提供你所需的结果时，发布一个关于这项小任务的问题，包括你的代码，并告诉我们代码如何无法提供你所期望的结果。你目前发布的内容更像是一份招聘人员的工作描述做工作。这个网站不是免费的编码服务。告诉我们你自己解决问题的努力，我们会帮助你。你能用我上面的代码帮我做这件事吗？我对javascript有点陌生。

<!------- First DIV -------->
<div>
                        <label for="sampleRecipientInput">How many physical locations you have *</label>
                        <div class="ss-custom-select">
                            <select class="full-width" id="blocation" name="blocation">
                                <option value="" disabled selected hidden>Select the number of physical location</option>
                                
                                <option value="One">One</option>
                                <option value="Multiple">Multiple</option>
                                <option value="Online">None (ex. online only)</option>
                            </select>
                        </div>  
                            <p id = "displayLocationError" style="color: red"></p>                  
                 
                                            
                  </div>



                  <script type="text/javascript">

                    var subtypeLists = new Array(4);
 subtypeLists["empty"] = ["Select the subtype of business"]; 

 subtypeLists["Ball Sports"] = ["Football", "Basketball", "Volleyball","Tennis", "Cricket", "Bowling","American Football", "Ruby", "Handball","Water Polo", "Golf"]; 

 subtypeLists["Extreme Sports"] = ["Skydiving", "Zipline", "Bungee Jumping", "Air Tunnel","Dune Bashing", "Parasailing", "Parkour", "Gliding"]; 

 subtypeLists["Entertainment"] = ["Thrill Parks", "VR Parks", "Haunted House","Paintball", "Karoake", "Stand Up","Animal Interaction", "Safari", "Aquarium", "Experience"]; 

 subtypeLists["Motorized Sports"]= ["Karting", "ATV & Motor Rentals", "Track Racing", "Dirt Biking"]; 

 subtypeLists["Aquatic Sports"]= ["Watercrafts", "Surfing", "Swimming", "Wakeboarding", "Scubadiving", "Fishing"]; 
 
 subtypeLists["Skills"]= ["Art & Crafts", "Equestrian", "Falconry", "Archery", "Music Lessons", "Chess Lessons", "General Workshops"]; 
 
 subtypeLists["Strength & Agility"]= ["Martial Arts", "Fitness", "Dancing", "Strength", "Fencing"]; 
 
 subtypeLists["Kids"]= ["Educational Workshops", "Fun & Adventure Experience", "Story Telling", "Overall hobbies for kids"]; 
 
                    
                     function categoryChange(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the subtypeLists array 
 cList = subtypeLists[which]; 
 // get the country select element via its known id 
 var cSelect = document.getElementById("subtype"); 
 // remove the current options from the country select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 

                  </script>


<!----- Second DIV ------->
                  <div>
                        <label for="sampleRecipientInput">Type of business?</label>
                        <div class="ss-custom-select">
                            <select class="full-width" id="btype" name="btype" onchange="categoryChange(this);">
                                
                                <option value="" disabled selected hidden>Select the type of business</option>
                                <option value="Ball Sports">Ball Sports</option>
                                <option value="Extreme Sports">Extreme Sports</option>
                                <option value="Entertainment">Entertainment</option>
                                <option value="Motorized Sports">Motorized Sports</option>
                                <option value="Aquatic Sports">Aquatic Sports</option>
                                <option value="Skills">Skills</option>
                                <option value="Strength & Agility">Strength & Agility</option>
                                <option value="Kids">Kids</option>
                            </select>
                        </div>      
                            <p id = "displayTypeError" style="color: red"></p>                  
                                
                  </div>


<!----- Third DIV ----->
                  <div>
                        <label for="sampleRecipientInput">Subtype of business?</label>
                        <div class="ss-custom-select">
                            <input type="checkbox" class="full-width" id="subtype" name="subtype[]" multiple="multiple" value="">
                                
                                    </input>
                        </div>      
                            <p id = "displaySubTypeError" style="color: red"></p>                   
                                
                  </div>