2
votes

Javascript Obtenir l'option de la liste déroulante en fonction de la valeur

Comment puis-je obtenir l'option dans une liste déroulante basée sur la valeur sélectionnée? Essentiellement, je veux obtenir l'option qui est sélectionnée, puis changer le innerHTML.

Voici ce que j'ai jusqu'à présent ..

$('[id*=DropDownOutfall]').val()

Je suis en mesure d'obtenir le valeur de l'option sélectionnée mais j'ai besoin de l'élément option afin de pouvoir mettre à jour le fichier innerHTML.

<select name="ctl00$MainContent$DropDownOutfall" onchange="CheckValueSelected();setTimeout('__doPostBack(\'ctl00$MainContent$DropDownOutfall\',\'\')', 0)" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>

javascript jquery drop-down-menu

2 commentaires

Et pourquoi pas simplement $ ('# DropDownOutfall'). Val () ?

que juste la valeur de l'option. Je veux prendre cette option et mettre à jour le innerHTML de celui-ci @LouysPatriceBessette

4 Réponses :

0
votes

$('#DropDownOutfall').change(function() {
    var selectedValue = $('#DropDownOutfall').val();
    var selectedOption = $('#DropDownOutfall option[value="' + selectedValue + '"]');
    selectedOption.val("option value");//Changes actual value
    selectedOption.html("option value");//Changes value text
});

0 commentaires

2
votes

Ici, cela sera sélectionné.

Ajout d'un changement de texte pour la démo.

REMARQUE: J'ai supprimé le __doPostBack dans le onChange car il n'existe pas dans l'extrait de code.

<select name="ctl00$MainContent$DropDownOutfall" onchange="CheckValueSelected();" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>

function CheckValueSelected() {
  document.querySelector('#DropDownOutfall option:checked').text += ' - test';
}

Ajouté celui-ci car Louys est correct, le sélecteur CSS peut vous amener directement à l'élément.

Bon cal Louys! .

<select name="ctl00$MainContent$DropDownOutfall" onchange="CheckValueSelected();" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>

function CheckValueSelected() {
  let sel = document.querySelector('#DropDownOutfall');
  let opt = sel.options[sel.selectedIndex];
  opt.text += 'Test Change';
  console.log(opt);
}

0 commentaires

0
votes

Voici une façon, en JS vanille

<select onchange="CheckValueSelected(this)" data-current-selection="" id="DropDownOutfall" class="form-control">
  <option selected="selected" value="-1">- Select an option -</option>
  <option value="OUTFALL 001">OUTFALL 001</option>
  <option value="OUTFALL 002">OUTFALL 002</option>
  <option value="OUTFALL 004">OUTFALL 004</option>
  <option value="OUTFALL 005">OUTFALL 005</option>
</select>

CheckValueSelected = _this => {
  const {
    currentSelection
  } = _this.dataset;
  if (currentSelection !== '') {
    _this.querySelector(`[value="${currentSelection}"]`).innerText = currentSelection;
  }
  const target = _this.querySelector('option:checked');
  _this.dataset.currentSelection = target.value;
  target.innerText += ' selected';
}

EDIT 1:

Approche plus dynamique, qui utilise le moins de sélecteurs.

EDIT 2:

Exemple plus complet avec ajout / suppression de sélections innerText et suivi des états précédents à l'aide d'un attribut de données data-current-selection="".

<select onchange="CheckValueSelected()" id="DropDownOutfall" class="form-control" style="">
  <option selected="selected" value="-1">- Select an option -</option>
  <option value="OUTFALL 001">OUTFALL 001</option>
  <option value="OUTFALL 002">OUTFALL 002</option>
  <option value="OUTFALL 004">OUTFALL 004</option>
  <option value="OUTFALL 005">OUTFALL 005</option>
</select>

CheckValueSelected = () => {
  const selVal = document.getElementById('DropDownOutfall');
  console.log(selVal.querySelector(`[value="${selVal.value}"]`));
}

0 commentaires

4
votes

Tout d'abord, utilisez simplement id : $ ('# DropDownOutfall') pour rechercher l'élément .

Ensuite , pour obtenir l'option sélectionnée, utilisez .find () et appliquez .html () (ou .text () ) dessus.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ctl00$MainContent$DropDownOutfall" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>

$('#DropDownOutfall').on('change',function(){
  $(this).find('option:selected').html('Hello world');
});

0 commentaires