change values when selecting an item in a combobox

Navigation
0

I want that when selecting an item in the combobox and pressing the buttons, everything related to the combobox item appears.

example : when the select is in Giosvel and the buttons are pressed that my information comes out and when I put in the select daniela that the information comes out of it  this is my index 

$(document).ready(function() {
  $('select').change("#Giosvel", function() {
    $("#a").click(function() {
      alert("Mi Apellido es CARRIL ")
    })
    $("#b").click(function() {
      alert("mi segundo nombre es AMADO")
    })
    $("#c").click(function() {
      alert("yo estoy comprometido con Daniela ")
    })
    $("#d").click(function() {
      alert("mi frase jajaja VALLA COGE SOBREDOSIS BEA")
    })
  })

  $('select').change("#Daniela", function() {
    $("#a").click(function() {
      alert("su apellido es gonzales ")
    })
    $("#b").click(function() {
      alert("su segundo nombre es victoria")
    })
    $("#c").click(function() {
      alert("esta comprometida con Gio El animal Carril ")
    })
    $("#d").click(function() {
      alert("Su frase es Te amo titi ")
    })

  })
})
<html>

<head>
  <title>Gio chismografo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="chismografo.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/jpg" href="losduros.jpg" />
  <script src="chismografo.js"></script>
</head>


<body>
  <video src="Yomil y el Dany - Que diran (Remix dj Wong).mp4" autoplay loop muted poster="losduros.jpg"></video>
  <div class="container-fluid">
    <div class="col-lg-12">
      <center>
        <h1>VALLA COGE SOBREDOSIS BEA</h1>
      </center>
    </div>
  </div>
  <center>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.css">

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/Presentation.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-md-4">&nbsp;</div>
        <div class="col-md-4">
          <select name="select">
     <option selected="giosvel" id="Giosvel">Giosvel</option>
     <option selected="daniela" id="Daniela">Daniela</option>
     </select> <br>
          <div class="alto">
            <button id="a" class="btn btn-primary btn-success"> Last Name</button>
            <button id="b" class="btn btn-primary btn-info">Middle Name</button><br>
            <button id="c" class="btn btn-primary btn-primary">Marriage</button>
            <button id="d" class="btn btn-primary btn-seconda">Fav Phrase</button>
          </div>
        </div>
        <div class="col-md-4">&nbsp;</div>
        <center>
      </div>
    </div>
</body>

</html>
    
asked by Giosvel Carril 13.06.2017 в 20:30
source

2 answers

1

Another option is the following:

  • When executing the change of select , depending on the selected option initialize variables with the response to each button.

  • In the click of each button shows a message and consumes a variable from those previously established.

Example: 

$(document).ready(function() {
  var apellido,
   nombre,
   pareja,
   frase;
   
  $("#a").click(function() {
    alert("El Apellido es " + apellido);
  });
  $("#b").click(function() {
    alert("El segundo nombre es " + nombre);
  });
  $("#c").click(function() {
    alert("Esta comprometido con " + pareja)
  })
  $("#d").click(function() {
    alert("Su frase es " + frase)
  })
  
  $('select').change(function() {
    if (this.value == 'giosvel') {
      apellido = 'CARRIL';
      nombre = 'AMADO';
      pareja = 'Daniela';
      frase = 'jajaja VALLA COGE SOBREDOSIS BEA';
    } else {
      apellido = 'Gonzales';
      nombre = 'Victoria';
      pareja = 'Gio El animal Carril';
      frase = 'Te amo titi';
    }
  });
  $('select').trigger('change');
})
<html>

<head>
  <title>Gio chismografo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="chismografo.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/jpg" href="losduros.jpg" />
  <script src="chismografo.js"></script>
</head>


<body>
  <video src="Yomil y el Dany - Que diran (Remix dj Wong).mp4" autoplay loop muted poster="losduros.jpg"></video>
  <div class="container-fluid">
    <div class="col-lg-12">
      <center>
        <h1>VALLA COGE SOBREDOSIS BEA</h1>
      </center>
    </div>
  </div>
  <center>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.css">

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/Presentation.js"></script>
    <div class="container">
      <div class="row">
        <div class="col-md-4">&nbsp;</div>
        <div class="col-md-4">
          <select name="select">
           <option value="giosvel">Giosvel</option>
           <option value="daniela">Daniela</option>
          </select><br>
          <div class="alto">
            <button id="a" class="btn btn-primary btn-success"> Last Name</button>
            <button id="b" class="btn btn-primary btn-info">Middle Name</button><br>
            <button id="c" class="btn btn-primary btn-primary">Marriage</button>
            <button id="d" class="btn btn-primary btn-seconda">Fav Phrase</button>
          </div>
        </div>
        <div class="col-md-4">&nbsp;</div>
        <center>
      </div>
    </div>
</body>

</html>
    
answered by 13.06.2017 / 20:57
source
0

We modify the HTML so that the select has an id and the options the corresponding value: 

<select id="seleccion">
  <option value="giosvel">Giosvel</option>
  <option value="daniela">Daniela</option>
</select>

And in the JS when pressing the buttons we filter according to the value in the select: 

$("#a").click(function(){
   if($("#seleccion").val === "giosvel") {
      alert("Mi Apellido es CARRIL ");
   } else if($("#seleccion").val === "daniela") {
      alert("su segundo nombre es victoria");
   }
});
    
answered by 13.06.2017 в 20:47
Get rows that have a date greater or less than a certain date Why did I create two folders (branch and trunk) when downloading a github project in tortoise?