Fatal编程技术网
  • javascript/
  • Javascript 如何从jquery中获取html元素select选项中的id和值，并将id和值传递给jquery中的document ready函数？

Javascript 如何从jquery中获取html元素select选项中的id和值，并将id和值传递给jquery中的document ready函数？

javascript jquery html select

Javascript 如何从jquery中获取html元素select选项中的id和值，并将id和值传递给jquery中的document ready函数？,javascript,jquery,html,select,option,Javascript,Jquery,Html,Select,Option,我有如下jquery和html代码： $(function () { //Initialize Select2 Elements $('.select2').select2() }); /*Show fill of each option in Choose Transportation*/ $(document).ready(function() { $('#tpt').change(function() { var option=$('

我有如下jquery和html代码：

 $(function () {
    //Initialize Select2 Elements
    $('.select2').select2()
 });

 /*Show fill of each option in Choose Transportation*/   
 $(document).ready(function() {
     $('#tpt').change(function() {
       var option=$('#tpt').val();
       showField(option);
       return false;
     });

     function showField(option) {
            var content = '';
            if(option == "cr"){
            content += '<label>Input car name</label>';
            content += '<input type="text" class="form-control"';               
            content += 'id="crn" name="crname">';
            } else if(option == "mc"){
            content += '<label>Type Motorcycle</label>';
            content += '<select id="tym" class="form-control';
            content += ' select2" name="tymotor"'; 
            content += ' style="width: 100%;">';
            content += '<option disabled selected>-Choose';                     
            content += ' Type-</option>';
            content += '<option value="hnd">Honda</option>';
            content += '<option value="ymh">Yamaha</option>';
            content += '</select>';
            }
        $('#contentSelected').html(content);
        }     
  });

  /*Show list of Honda motorcylce if value "hnd" was click in Type MotorCycle*/
  $(document).ready(function() {
     $('#tym').change(function() {
       var option2=$('#tym').val();
       showFieldmtr(option2);
       return false;
     });

     function showFieldmtr(option2) {
            var contentmtr = '';
            if(option == "hnd"){
            contentmtr += '<label>Type Honda</label>';
            contentmtr += '<select id="tyhnd" class="form-control';
            contentmtr += ' select2" name="tyhonda"'; 
            contentmtr += ' style="width: 100%;">';
            contentmtr += '<option disabled selected>-Choose';                 
            contentmtr += ' Honda Motorcycle-</option>';
            contentmtr += '<option value="vr">Vario</option>';
            contentmtr += '<option value="bt">Beat</option>';
            contentmtr += '</select>';
            }
        $('#contentSelectedmtr').html(contentmtr);
        }     
   });

   /*Show Value Choose MotorCylce*/
   $(document).on('change','#tym', function() { 
   var typemotor = $(this).val();
   $(document).find('input[name="trname"]').val(typemotor);
   });

    $(document).on('input','input[name="crname"]', function() { 
    var carname = $(this).val();
    $(document).find('input[name="trname"]').val(carname);
    });

    <!DOCTYPE html>
    <html>
    <head>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >

<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />

<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="form-group">
<label>Transportatiom</label>
<select id="tpt" class="form-control select2" style="width: 100%;">
<option disabled selected>-Choose Transportation-</option>
<option value="cr">Car</option>
<option value="mc">Motorcycle</option>
</select>
</div>
<div class = "form-group">
<label>Transportation Value</label>
<input type="text" class="form-control" id="tnm" name="trname" readonly>
</div>
<div class="form-group" id="contentSelected">
</div>
<div class="form-group" id="contentSelectedmtr">
</div>

<!-- Latest compiled and minified JavaScript -->
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Select2 Jquery -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
</body>
</html>
当jquery在if option==mc中处理html时，会处理-Show Value Choose Motorcycle-中的函数，因为该函数检测到id tym和值。但是，如果hnd值是点击式摩托车，则无法处理本田摩托车的显示列表中的函数。我不明白哪里出了问题：

函数-Show list of Honda motoryclce if option==mc中的字符串内容是否错误？如果值hnd是在类型MotorCycle中单击的？但是我认为如果字符串是错误的，id tym和值就不能被接受，Show value Choose Motorcycle中的函数就不能被处理 我的jquery函数位置是否错误？我不知道，但是处理了-Show Value Choose Motorcycle中的函数，该函数在Choose Transportation中每个选项的函数Show fill之后在底部的位置，以及-Show Value Choose Motorcycle中的函数，因为可以获取id tym和值。所以我的jquery函数位置没有错，是不是错了？ 如果hnd值为点击式摩托车，本田摩托车的“选择运输和显示”列表中每个选项的“显示填充”功能是否崩溃？ 因此，我的问题是：

1当jquery中的第一个选择选项显示为html并且我们在第一个选择选项中选择该选项时，显示第二个选择选项的解决方案是什么

2如何解决id tym中select2的问题？因为我认为IDTYM中选择选项的设计只是一个简单的选择选项。该设计与html中id tpt中的select选项不同

我的代码程序是

您的事件处理程序仅附加到最初加载页面时存在的元素。如果以后像showField和showFieldmtr一样向DOM添加新元素，则事件处理程序不会附加到这些新元素。你需要这样做。这个问题的变体是一些最常见的jQuery问题。可能很难找到它们，因为每个人的用例都不同，具体情况也不同。这能回答你的问题吗？