проблема множественного выбора начальной загрузки открывается при добавлении нескольких - PullRequest
Новая
       15

проблема множественного выбора начальной загрузки открывается при добавлении нескольких

0 голосов
/ 23 января 2019

Я пытаюсь установить выпадающий список множественного выбора на моей странице, но когда я запускаю код с «множеством» внутри тега выбора, раскрывающийся список перестает работать.

Без многократного или без инициализации множественного выбора с помощью JavaScript код работает, но позволяет мне выбирать только одну строку за раз.

Это мой код. Заранее спасибо. 

$(document).ready(function(){
	
	let dropdown = $('#city');
	dropdown.empty();
	dropdown.append('<option selected=true disabled>Please Choose City...</option>');
	dropdown.prop('selectedIndex', 0);

	const url = 'http://localhost/newantiguedad/fillCity.php';

	$.getJSON(url,function(data){
		$.each(data, function(key,entry){
			dropdown.append($('<option></option>').attr('value', entry.id).text(entry.pais));
		})
	});
});

$(document).ready(function(){
  $('#city').on('change',function(){
    $city = $(this).val();
    if ($city) {
      $.ajax({
        type:'POST',
        url:'fillMarca.php',
        data:'city='+$city,
        success:function(html)
        {
          console.log(html);
          $('#brand').html(html);
        },
      });
    }
  });
});

$(document).ready(function(){
  $('#brand').on('change',function(){
    var brand = document.getElementById('brand').value;
    var city = document.getElementById('city').value;
    $.ajax({
      type:'POST',
      url:'fillStore.php',
      data: {brand: brand, city: city},
      success:function(html)
      {
        console.log(html);
        $('#store').html(html);
      },
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>AGING-WEB</title>
		<link rel="stylesheet" href="includes/Bootstrap/css/bootstrap.min.css" type="text/css"/>
		<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" type="text/css"> -->
		<script src="includes/js/jquery-3.3.1.min.js" type="text/javascript"></script>
		<script src="includes/js/fill-dropdown.js" type="text/javascript"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
		<script src="includes/Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
		<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script> -->
	</head>
	<body>
		<h2>AGING - WEB</h2>
		<form class="row" action="" method="post" id="container">
			<div class="form-group col-lg-3">
				<label for="pais">City</label>
				<select class="form-control" id="city" name="city" required>
				</select>
			</div>
			<div class="form-group col-lg-3">
				<label for="brand">Brand</label>
				<select class="form-control" id="brand" name="brand" required>
					<option value="" disabled selected hidden>Please Choose Brand...</option>
				</select>
			</div>
			<div class="form-group col-lg-3">
				<label for="store">Store</label>
				<select class="form-control" id="store" name="store" required >
					<option value="" disabled selected hidden>Please Choose Store...</option>
				</select>
			</div>
			<div class="form-group col-lg-3">
				<button type="submit" class="btn btn-danger" id="aging" name="aging">AGING DB</button>
				<button type="submit" class="btn btn-success" id="report" name="report">REPORT-AGING</button>
			</div>
		</form>
	</body>
</html>
...