Question

第二个选择标记在动态添加选项元素时不起作用。我知道我已经初始化了动态内容的素材选择，但不知道该怎么做。我附上了我的Java Script和Html标签供参考。

＆＃13;

 < script >

   $(document).ready(function() {
     $('select').material_select();
   }); < /script>
		 
	  <script type="text/javascript">
function populate(s1,s2){
	var s1 = document.getElementById(s1);
	var s2 = document.getElementById(s2);
	s2.innerHTML = "";
	if(s1.value == "Arsenal"){
		var optionArray = ["Mikel|John Obi Mikel"];
	} 
	for(var option in optionArray){
		var pair = optionArray[option].split("|");
		var newOption = document.createElement("option");
		newOption.value = pair[0];
		newOption.innerHTML = pair[1];
		s2.options.add(newOption);
	}
}
</script >

＆＃13;

<div class="input-field col s12">
  <select id="slct1" name="slct1" onChange="populate('slct1','slct2')">
    <option value="">Choose team</option>
    <option value="1">Arsenal</option>
    <option value="2">Chelsea</option>
    <option value="3">Manchester United</option>
  </select>
</div>

<div class="input-field col s12">
  <select id="slct2" name="slct2">

  </select>
</div>

＆＃13;

Answer 1

如果您使用的是jQuery，则不应使用纯Javascript＆＃39; document.getElementById，document.createElement，innerHTML等...

看看这个完整的样本：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {

                $('#teams').change(function() {

                    var 
                        selectedValue = $('#teams').val(),
                        dataSource,
                        i;

                    if (selectedValue === '1') {

                        dataSource = ['Mikel', 'Obi', 'Mikel'];
                    }
                    else if (selectedValue === '2') {

                        dataSource = ['Test 1', 'Test 2', 'Test 3'];
                    }

                    $('#players').html('');

                    for (i in dataSource) {

                        $('#players').append('<option>' + dataSource[i] +'</option>');
                    }
                });
            });
        </script>
    </head>
<body>
    <div>
        <select id="teams">
        <option value="">Choose team</option>
        <option value="1">Arsenal</option>
        <option value="2">Chelsea</option>
        <option value="3">Manchester United</option>
        </select>
    </div>
    <div>
        <select id="players">
        </select>
    </div>
</body>
</html>

结果：https://jsfiddle.net/logual/kk6dag8j/

使用＆＃34; Materialise＆＃34;更新HTML代码进口：

<!DOCTYPE html>
<html>
    <head>
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {

                $('#teams').change(function() {

                    var 
                        selectedValue = $('#teams').val(),
                        dataSource,
                        i;

                    if (selectedValue === '1') {

                        dataSource = ['Mikel', 'Obi', 'Mikel'];
                    }
                    else if (selectedValue === '2') {

                        dataSource = ['Test 1', 'Test 2', 'Test 3'];
                    }

                    $('#players').html('');

                    for (i in dataSource) {

                        $('#players').append('<option>' + dataSource[i] +'</option>');
                    }
                });
            });
        </script>
    </head>
<body>
    <div>
        <div class="input-field">
            <select style="display: block; width: 200px;" id="teams">
            <option value="" disabled selected>Choose team</option>
            <option value="1">Arsenal</option>
            <option value="2">Chelsea</option>
            <option value="3">Manchester United</option>
            </select>
        </div>
        <div class="input-field">
            <select style="display: block; width: 200px;" id="players">
            </select>
        </div>
    </div>
    <script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

Answer 2

＆＃13;

	    < script >

	     $(document).ready(function() {
	       $('select').material_select();
	       $('#slct1').change(function() {
	         if ($('#slct1').val() == "1") {

	           var a = " <select id='second_menu' >" <? php
	           while ($row1 = mysqli_fetch_array($query_run1, MYSQLI_ASSOC)): ?>
	             +"<option value='<?php echo $row1["
	           player_id "];?>'><?php echo $row1["
	           player_name "]; ?></option>" <? php endwhile; ?>
	           +"</select>";
	         } else if ($('#slct1').val() == "2") {

	           var a = " <select id='second_menu' >" <? php
	           while ($row1 = mysqli_fetch_array($query_run2, MYSQLI_ASSOC)): ?>
	             +"<option value='<?php echo $row1["
	           player_id "];?>'><?php echo $row1["
	           player_name "]; ?></option>" <? php endwhile; ?>
	           +"</select>";
	         } else if ($('#slct1').val() == "3") {

	           var a = " <select id='second_menu' >" <? php
	           while ($row1 = mysqli_fetch_array($query_run3, MYSQLI_ASSOC)): ?>
	             +"<option value='<?php echo $row1["
	           player_id "];?>'><?php echo $row1["
	           player_name "]; ?></option>" <? php endwhile; ?>
	           +"</select>";
	         }

	         $("#set_options").html(a);

	         $('#second_menu').material_select();
	       })
	     });

＆＃13;

<div class="input-field col s12">
  <select id="slct1" name="slct1">
    <option value="">Choose team</option>
    <option value="1">Arsenal</option>
    <option value="2">Chelsea</option>
    <option value="3">Manchester United</option>
  </select>
</div>
<div id="set_options"></div>

＆＃13;

我自己通过在向其添加动态选项时初始化材料选择找到了解决方案。

Materialise Select - 动态添加选项时不起作用

2 个答案: