Блог

Главная - Вопросы по программированию - Выпадающий список проблем выбор очистки

Выпадающий список проблем выбор очистки

#javascript #html #dropdown

Вопрос:

Мой выпадающий список отлично работает, он показывает необходимую информацию, но когда я возвращаюсь к верхнему выбору «Что бы вы хотели узнать сегодня?«предварительная информация не разглашается. Есть какие-нибудь мысли о том, как это исправить?

 var jsonStringProcessing =
   '[{"Question":"Where would I find information on late trips?","Answer":"By using the Late Trip Application you can see incoming mail to your facility.","Link":"https://www.usps.com"},
     {"Question":"How many DPS errors will I have?","Answer":"Log into the application and drill down by zip 4 facility.","Link":"https://www.usps.com"},
     {"Question":"What should I do if im missing a trip?","Answer":"Login into the ___ application and drill down by facility.","Link":"https://www.usps.com"},
     {"Question":"What should I do if a load plan fails?","Answer":"Contact __ via the __ application","Link":"https://www.usps.com"},
     {"Question":"Where do I report late arriving trips?","Answer":"Click on the below hyper link to submit information.","Link":"https://www.usps.com"},
     {"Question":"How can I control work hours to plan?","Answer":"By logging into IVES and entering the appropriate information you can plan and schedule employees.","Link":"https://www.usps.com"}]';
var jsObjectProcessing = JSON.parse(jsonStringProcessing);

// fill processing select list
$.each(jsObjectProcessing, function (key, val) {
   $("#processing").append("<option>"   val.Question   "</option>");
});

//$(document).ready(function() {
$("#processing").change(function () {
   var selectedItem = $(this).val();
   $.each(jsObjectProcessing, function () {
      if (this.Question == selectedItem) {
         $("#listProcessing").html(
            '<b>Answer:</b> '  
               this.Answer  
               '<br>'  
               '<b>Link:</b> <a href="'   this.Link   '" target="_blank">'   this.Link   '</a>'
         );
      }
   });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6 mb-5 mx-auto">
  <select class="custom-select shadow-sm" id="processing">
    <option value="">What would you like to learn today?</option>
</select>
      <div class="mt-2">
      <div id="listProcessing">
    </div>
  </div> 
</div>

Комментарии:

1. Добавьте условие, которое очищает ответ, когда выбранная опция имеет значение = "" (это не произойдет автоматически-для этого вам нужно добавить код JS)

Ответ №1:

 var jsonStringProcessing =
   '[{"Question":"Where would I find information on late trips?","Answer":"By using the Late Trip Application you can see incoming mail to your facility.","Link":"https://www.usps.com"},
     {"Question":"How many DPS errors will I have?","Answer":"Log into the application and drill down by zip 4 facility.","Link":"https://www.usps.com"},
     {"Question":"What should I do if im missing a trip?","Answer":"Login into the ___ application and drill down by facility.","Link":"https://www.usps.com"},
     {"Question":"What should I do if a load plan fails?","Answer":"Contact __ via the __ application","Link":"https://www.usps.com"},
     {"Question":"Where do I report late arriving trips?","Answer":"Click on the below hyper link to submit information.","Link":"https://www.usps.com"},
     {"Question":"How can I control work hours to plan?","Answer":"By logging into IVES and entering the appropriate information you can plan and schedule employees.","Link":"https://www.usps.com"}]';
var jsObjectProcessing = JSON.parse(jsonStringProcessing);

// fill processing select list
$.each(jsObjectProcessing, function (key, val) {
   $("#processing").append("<option>"   val.Question   "</option>");
});

//$(document).ready(function() {
$("#processing").change(function () {
   var selectedItem = $(this).val();
   $.each(jsObjectProcessing, function () {
      if (this.Question == selectedItem) {
         $("#listProcessing").html(
            '<b>Answer:</b> '  
               this.Answer  
               '<br>'  
               '<b>Link:</b> <a href="'   this.Link   '" target="_blank">'   this.Link   '</a>'
         );
      }
   });
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6 mb-5 mx-auto">
  <select class="custom-select shadow-sm" id="processing">
    <option value="" disabled selected>What would you like to learn today?</option>
</select>
      <div class="mt-2">
      <div id="listProcessing">
    </div>
  </div> 
</div>

вы могли бы использовать вот так

 <option value="" disabled selected>Select your option</option>

Ответ №2:

Поскольку это не произойдет автоматически, что вы можете сделать, так это:

  1. Отключите первую опцию, как только появятся какие-либо параметры selected .
  2. Добавьте if условие, если выбран первый вариант selected .
 var jsonStringProcessing =
   '[{"Question":"Where would I find information on late trips?","Answer":"By using the Late Trip Application you can see incoming mail to your facility.","Link":"https://www.usps.com"},
     {"Question":"How many DPS errors will I have?","Answer":"Log into the application and drill down by zip 4 facility.","Link":"https://www.usps.com"},
     {"Question":"What should I do if im missing a trip?","Answer":"Login into the ___ application and drill down by facility.","Link":"https://www.usps.com"},
     {"Question":"What should I do if a load plan fails?","Answer":"Contact __ via the __ application","Link":"https://www.usps.com"},
     {"Question":"Where do I report late arriving trips?","Answer":"Click on the below hyper link to submit information.","Link":"https://www.usps.com"},
     {"Question":"How can I control work hours to plan?","Answer":"By logging into IVES and entering the appropriate information you can plan and schedule employees.","Link":"https://www.usps.com"}]';
var jsObjectProcessing = JSON.parse(jsonStringProcessing);

// fill processing select list
$.each(jsObjectProcessing, function (key, val) {
   $("#processing").append("<option>"   val.Question   "</option>");
});

//$(document).ready(function() {
$("#processing").change(function () {
   var selectedItem = $(this).val();
   if (selectedItem == ""){
      $("#listProcessing").html("");
   }
   else{
     $.each(jsObjectProcessing, function () {
        if (this.Question == selectedItem) {
           $("#listProcessing").html(
              '<b>Answer:</b> '  
                 this.Answer  
                 '<br>'  
                 '<b>Link:</b> <a href="'   this.Link   '" target="_blank">'   this.Link   '</a>'
           );
        }
     });
   }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-6 mb-5 mx-auto">
  <select class="custom-select shadow-sm" id="processing">
    <option value="">What would you like to learn today?</option>
</select>
      <div class="mt-2">
      <div id="listProcessing">
    </div>
  </div> 
</div>
Метки: