Добавить несколько <option>от объекта в <select>с помощью JavaScript - PullRequest
Новая
       1

Добавить несколько <option>от объекта в <select>с помощью JavaScript

1 голос
/ 08 марта 2019

Я пытаюсь построить форму с двумя выберите. В зависимости от выбора, сделанного в первом, список возможных вариантов во втором должен быть адаптирован.

Таким образом, если выбрано 1, значение выбора равно 1 => Отобразить объект 1 в качестве опций для выбора 2.

Я создал этот код js: 

var EntiteGenerale = document.getElementById("TypeEntityId").value;
var select = document.getElementById("EntityId");
var index;

var Departement = {
  1: "Finances et Administration",
  2: "Service Logistique Transversale",
  3: "Institut de Formation",
  4: "Communication, Marketing & Commercial",
  5: "Volontariat",
  6: "Ressources Humaines",
  7: "Service francophone du sang",
  8: "Service ECM et DIH",
  9: "Service Tracing",
  10: "Département Secours"
};

var CentreSecours = {
  1: "CG BUTGENBACH BULLINGEN",
  2: "CS BLEGNY",
  3: "CS BRABANT OUEST",
  4: "CS CHARLEROI",
  5: "CS HAUTE SENNE",
  6: "CS HERSTAL - OUPEYE",
  7: "CS TOURNAI",
  8: "CS NAMUR",
  9: "CS OTTIGNIES",
  10: "CS OUGREE",
  11: "CS PHILIPPEVILLE",
  12: "CS ROCHEFORT",
  13: "CS SPA",
  14: "CS HESBAYE-CONDROZ",
  15: "CS JODOIGNE",
  16: "CS LIEGE",
  17: "CS LUXEMBOURG",
  18: "CS MONS",
  19: "CS MOUSCRON"
};




function DisplayEntiteL() {
  if (EntiteGenerale === 2) {
    for (index in Departement) {
      select.options[select.options.length] = new Option(Departement[index], index);
    }
  } else if (EntiteGenerale === 3) {
    for (index in CentreSecours) {
      select.options[select.options.length] = new Option(CentreSecours[index], index);
    }
  } else {
    console.log("rien à afficher");
  }
}

Но когда я пытаюсь это сделать, всегда отображается оператор else "rien afficer", потому что мои опции не добавляются.

Не могли бы вы сказать мне, что не так с моим кодом? Полный код см. В этом JSFiddle .

Заранее спасибо.

С уважением,

Ответы [ 3 ]

1 голос
/ 08 марта 2019

Если я правильно понимаю ваш вопрос, вы хотите, чтобы элементы <option> элемента EntityId select динамически изменялись в зависимости от значения элемента TypeEntityId select. Попробуйте изменить код, чтобы событие change было добавлено к выбору TypeEntityId через addEventListener(): 

/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)

Кроме того, вы пересматриваете свои строки if, чтобы значения в сравнениях были строками, чтобы обеспечить выполнение условий соответствия значений: 

/* Add event parameter to localize value extraction from corresponding
select element */
function DisplayEntiteL(event) {

  /* Get current value of TypeEntityId select */
  const value = event.currentTarget.value
  const entityId = document.getElementById("EntityId");

  /* Empty any previous options from EntityId select */
  while (entityId.hasChildNodes()) {
    entityId.removeChild(entityId.lastChild);
  }

    /* If value of TypeEntityId is 2 then show Departement items in
  entityId select */
  if (value === '2') {
    for (index in Departement) {
      entityId.appendChild(new Option(Departement[index], index));
    }

  }   
    /* If value of TypeEntityId is 3 then show CentreSecours items in
  entityId select */
  else if (value === '3') {

    for (index in CentreSecours) {
      entityId.appendChild(new Option(CentreSecours[index], index));
    }
  } 
  /* Otherwise log to console */
  else {
    /* entityId.appendChild(new Option('No options')); */
    console.log("rien à afficher");
  }
}

Кроме того, приведенный выше код вводит параметр event, позволяющий получить доступ к value из TypeEntityId, выбранного в обработчике событий. Для полного рабочего образца см. Этот JSFiddle или фрагмент ниже: 

var EntiteGenerale = document.getElementById("TypeEntityId").value;

var Departement = {
  1: "Finances et Administration",
  2: "Service Logistique Transversale",
  3: "Institut de Formation",
  4: "Communication, Marketing & Commercial",
  5: "Volontariat",
  6: "Ressources Humaines",
  7: "Service francophone du sang",
  8: "Service ECM et DIH",
  9: "Service Tracing",
  10: "Département Secours"
};

var CentreSecours = {
  1: "CG BUTGENBACH BULLINGEN",
  2: "CS BLEGNY",
  3: "CS BRABANT OUEST",
  4: "CS CHARLEROI",
  5: "CS HAUTE SENNE",
  6: "CS HERSTAL - OUPEYE",
  7: "CS TOURNAI",
  8: "CS NAMUR",
  9: "CS OTTIGNIES",
  10: "CS OUGREE",
  11: "CS PHILIPPEVILLE",
  12: "CS ROCHEFORT",
  13: "CS SPA",
  14: "CS HESBAYE-CONDROZ",
  15: "CS JODOIGNE",
  16: "CS LIEGE",
  17: "CS LUXEMBOURG",
  18: "CS MONS",
  19: "CS MOUSCRON"
};

/* Add event parameter to localise value extraction from corresponding
select element */
function DisplayEntiteL(event) {
	
  /* Get current value of TypeEntityId select */
  const value = event.currentTarget.value
  const entityId = document.getElementById("EntityId");

  /* Empty any previous options from EntityId select */
  while (entityId.hasChildNodes()) {
    entityId.removeChild(entityId.lastChild);
  }

	/* If value of TypeEntityId is 2 then show Departement items in
  entityId select */
  if (value === '2') {
    for (index in Departement) {
      entityId.appendChild(new Option(Departement[index], index));
    }

  }   
	/* If value of TypeEntityId is 3 then show CentreSecours items in
  entityId select */
  else if (value === '3') {

    for (index in CentreSecours) {
      entityId.appendChild(new Option(CentreSecours[index], index));
    }
  } 
  /* Otherwise log to console */
  else {
  	/* entityId.appendChild(new Option('No options')); */
    console.log("rien à afficher");
  }
}

/* Bind change event via addEventListener() */
document.getElementById("TypeEntityId").addEventListener('change', DisplayEntiteL)
  input[type='checkbox'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 15px;
    height: 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 15px;
    height: 15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }

  input[type='radio']:checked {
    background-color: red;
  }

  input[type='checkbox']:checked {
    background-color: red;
  }

  input::placeholder {
    font-size: 0.7rem;
  }

  select {
    border-radius: 20px;
    font-size: 0.8rem;
  }

  select:focus {
    border-color: #ff2400;
    outline: 0;
    box-shadow: none;
  }
<div class="row col-md-12">
  <div class="col-md-12">
    Votre entité générale :&nbsp;&nbsp;
    <select data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
      id="TypeEntityId" name="TypeEntityId">
      <option value="">Sélectionnez une entité générale</option>
                        <option value="2">Départements &amp; Services centraux</option>
                        <option value="3">Centre de secours</option>
                        <option value="4">Section locale (Bruxelles) </option>
                        <option value="5">Comité Provincial</option>
                        <option value="6">Relais</option>
                        <option value="7">SISU</option>
                        <option value="8">Centre ADA</option>
                        <option value="9">Maison Croix-Rouge</option>
                        </select>
    <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
  </div>

</div>
<br>
<div class="row col-md-12">
  <div class="col-md-12">
    Votre entité locale :&nbsp;&nbsp;
    <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
      id="EntityId" name="EntityId"><option value="">Sélectionnez une entité locale</option>
</select>
    <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
  </div>

</div>
1 голос
/ 08 марта 2019
  1. Вы сохраняете выбранное значение перед функцией изменения. Поэтому каждый раз одно и то же значение.
  2. Так что вызывайте внутри функции изменения.
  3. А также возврат выбранного значениясо строкой. Вы должны преобразовать в int. Иначе === возвращает false. Потому что === проверяет тип данных также 

var EntiteGenerale = document.getElementById("TypeEntityId");
var select = document.getElementById("EntityId");
var index;

var Departement = {
  1: "Finances et Administration",
  2: "Service Logistique Transversale",
  3: "Institut de Formation",
  4: "Communication, Marketing & Commercial",
  5: "Volontariat",
  6: "Ressources Humaines",
  7: "Service francophone du sang",
  8: "Service ECM et DIH",
  9: "Service Tracing",
  10: "Département Secours"
};

var CentreSecours = {
  1: "CG BUTGENBACH BULLINGEN",
  2: "CS BLEGNY",
  3: "CS BRABANT OUEST",
  4: "CS CHARLEROI",
  5: "CS HAUTE SENNE",
  6: "CS HERSTAL - OUPEYE",
  7: "CS TOURNAI",
  8: "CS NAMUR",
  9: "CS OTTIGNIES",
  10: "CS OUGREE",
  11: "CS PHILIPPEVILLE",
  12: "CS ROCHEFORT",
  13: "CS SPA",
  14: "CS HESBAYE-CONDROZ",
  15: "CS JODOIGNE",
  16: "CS LIEGE",
  17: "CS LUXEMBOURG",
  18: "CS MONS",
  19: "CS MOUSCRON"
};




function DisplayEntiteL() {
  EntiteGenerale = parseFloat(EntiteGenerale.value);
  if (EntiteGenerale === 2) {
    for (index in Departement) {
      select.options[select.options.length] = new Option(Departement[index], index);
    }
  } else if (EntiteGenerale === 3) {
    for (index in CentreSecours) {
      select.options[select.options.length] = new Option(CentreSecours[index], index);
    }
  } else {
    console.log("rien à afficher");
  }
}
input[type='checkbox'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 15px;
  height: 15px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 15px;
  height: 15px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

input[type='radio']:checked {
  background-color: red;
}

input[type='checkbox']:checked {
  background-color: red;
}

input::placeholder {
  font-size: 0.7rem;
}

select {
  border-radius: 20px;
  font-size: 0.8rem;
}

select:focus {
  border-color: #ff2400;
  outline: 0;
  box-shadow: none;
}
<div class="row col-md-12">
  <div class="col-md-12">
    Votre entité générale :&nbsp;&nbsp;
    <select onchange="DisplayEntiteL()" data-val="true" data-val-number="The field TypeEntityId must be a number." data-val-range="The field TypeEntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner un TYPE d'entité"
      id="TypeEntityId" name="TypeEntityId">
      <option value="">Sélectionnez une entité générale</option>
      <option value="2">Départements &amp; Services centraux</option>
      <option value="3">Centre de secours</option>
      <option value="4">Section locale (Bruxelles) </option>
      <option value="5">Comité Provincial</option>
      <option value="6">Relais</option>
      <option value="7">SISU</option>
      <option value="8">Centre ADA</option>
      <option value="9">Maison Croix-Rouge</option>
    </select>
    <span class="field-validation-valid text-danger" data-valmsg-for="TypeEntityId" data-valmsg-replace="true"></span>
  </div>

</div>
<br>
<div class="row col-md-12">
  <div class="col-md-12">
    Votre entité locale :&nbsp;&nbsp;
    <select data-val="true" data-val-number="The field EntityId must be a number." data-val-range="The field EntityId must be between 1 and 2147483647." data-val-range-max="2147483647" data-val-range-min="1" data-val-required="Vous devez donner une ENTITE"
      id="EntityId" name="EntityId">
      <option value="">Sélectionnez une entité locale</option>
    </select>
    <span class="field-validation-valid text-danger" data-valmsg-for="EntityId" data-valmsg-replace="true"></span>
  </div>

</div>

Почему parseFloat

enter image description here

0 голосов
/ 08 марта 2019

Спасибо большое @prasanth!

После нескольких исследований я попробовал это, который отлично работает. Я добавил функцию для очистки выбора перед отображением нового объекта внутри. 

  <select onchange="DisplayEntiteL(event)"></select>

- 

 var EntiteGenerale = document.getElementById("TypeEntityId");
    var select = document.getElementById("EntityId");
    var index;

    var Departement = {
      1: "Finances et Administration",
      2: "Service Logistique Transversale",
      3: "Institut de Formation",
      4: "Communication, Marketing & Commercial",
      5: "Volontariat",
      6: "Ressources Humaines",
      7: "Service francophone du sang",
      8: "Service ECM et DIH",
      9: "Service Tracing",
      10: "Département Secours"
    };

    var CentreSecours = {
      1: "CG BUTGENBACH BULLINGEN",
      2: "CS BLEGNY",
      3: "CS BRABANT OUEST",
      4: "CS CHARLEROI",
      5: "CS HAUTE SENNE",
      6: "CS HERSTAL - OUPEYE",
      7: "CS TOURNAI",
      8: "CS NAMUR",
      9: "CS OTTIGNIES",
      10: "CS OUGREE",
      11: "CS PHILIPPEVILLE",
      12: "CS ROCHEFORT",
      13: "CS SPA",
      14: "CS HESBAYE-CONDROZ",
      15: "CS JODOIGNE",
      16: "CS LIEGE",
      17: "CS LUXEMBOURG",
      18: "CS MONS",
      19: "CS MOUSCRON"
    };


    function clearOption(){
      var x = document.getElementById("EntityId");
      while (x.length != 0) {
        x.remove(x.length-1);
      }
     }

    function DisplayEntiteL(event) {
      if (event.target.value === '1') {
        clearOption();
        for (index in Departement) {
          select.options[select.options.length] = new Option(Departement[index], index);
        }
      } else if (event.target.value === '2') {
        clearOption();
        for (index in CentreSecours) {
          select.options[select.options.length] = new Option(CentreSecours[index], index);
        }
      } else {
        console.log("rien à afficher");
      }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...