Выберите не работает - параметры не отображаются при нажатии - PullRequest
Новая
       0

Выберите не работает - параметры не отображаются при нажатии

0 голосов
/ 11 февраля 2020

Я создал тег select с использованием materialize CSS. Создание параметров для этого тега выбора динамически. получить данные из Firebase, а затем создать параметры. но варианты не отображаются, когда я нажимаю на тег выбора. но когда я go для проверки будет отображаться, эти опции находятся в теге выбора. как решить это

вот как 'chrome проверять' и результат выглядит как

это HTML часть 

<!DOCTYPE html>
<html>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
  />

  <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
  />


  <!-- Compiled and minified JavaScript -->

  <!-- <link
    rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  /> -->

  <head>
    <title></title>
  </head>
  <body>
    <div class="container">
      <h2>Create schedule</h2>

      <div class="input-field col s12">
    <select id="doctors"  onchange="myFunction()">
      <option value="0" disabled selected>Choose your option</option>
    </select>
    <label>Materialize Select</label>
  </div>
</div>







    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-analytics.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>

    <script src="config.js"></script>

    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>
      $(document).ready(function() {

        $('select').formSelect();

      });
    </script>

    <script src="doctor_scheduler_JS.js"></script> //external js file
  </body>
</html>

внешний js файл (doctor_scheduler_ JS. js) 

const auth = firebase.auth();
const db = firebase.firestore();

var doctorsnames=[];
var doctorsuids=[];

const dropdown = document.getElementById("doctors");
const option1 = document.createElement("option");


db.collection("doctors")
    .get()
    .then(function(querySnapshot) {

        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
           // var js = JSON.stringify(doc.data());
           // document.getElementById("container25").innerHTML = js;
            doctorsnames.push(doc.data().Name.fullname);

            doctorsuids.push(doc.id);


        });
        SetDropDown();

    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });


    function SetDropDown(){


      var loop = 0;

      doctorsnames.forEach(k=>{
        //feildcotorsnames +=k + "<br>";

        var option1 = document.createElement("option");
        option1.value =doctorsuids[loop];
        option1.innerHTML =k;
        dropdown.appendChild(option1);
        loop++;
      });

      document.getElementById("container25").innerHTML = doctorsuids;

    }



    var show = ["india","pakisthan","usa","uk"];
    var values = ["3","4","5","6"];

    var j=0;
    show.forEach(i=>{

        const option1 = document.createElement("option");
            option1.value =values[j];
            option1.innerHTML =i;
            dropdown.appendChild(option1);
            j++;

    });

Ответы [ 2 ]

1 голос
/ 11 февраля 2020

Проблема заключается в этом разделе вашего кода 

$.ajax({
        url: 'upload.php', // point to server-side PHP script 
        data: form_data,                         
        type: 'post',
        success: function(data){
            console.log(data); // display response from the PHP script, if any
        }
     });

Добавьте эти параметры к вашему ajax вызову 

    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        data: form_data,         
        enctype: 'multipart/form-data',
        type: 'post',
        processData: false,
        contentType: false,
        success: function(data){
            console.log(data); // display response from the PHP script, if any
        }
     });

См. Jquery документацию здесь https://api.jquery.com/jQuery.ajax/

processData

По умолчанию данные, передаваемые в параметр данных в виде объекта (технически, ничего, кроме строки), будут обрабатываться и преобразовываться в строку запроса, соответствующую типу содержимого по умолчанию "application / x- www-form-urlencoded". Если вы хотите отправить DOMDocument или другие необработанные данные

0 голосов
/ 12 февраля 2020

Просто добавьте форму с enctype = "multipart / form-data" в ней, затем используйте эту форму в данных формы

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...