0

Quiero que al seleccionar un item del combobox y presionen los botones aparezca todo lo relacionado al item del combobox.

ejemplo:cuando el select este en Giosvel y se presionen los botones que salga mi informacion y cuando ponga en el select daniela que salga la informacion de ella este es mi 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>

2
  • 1
    Podrias cambiarle el titulo de la pregunta y poner algo mas especifico Commented el 13 jun. 2017 a las 18:32
  • Con que boton es que se edita el cuerpo del mensaje aqui? Commented el 13 jun. 2017 a las 18:45

2 respuestas 2

1

Otra opción es la siguiente:

  • Al ejecutarse el change del select, dependiendo de la opción seleccionada inicializar variables con las respuesta a cada botón.

  • En el click de cada button muestra un mensaje y consume una variable de las establecidas anteriormente.

Ejemplo:

$(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>

1
  • mi hermano muchisimas gracias por la ayuda Commented el 13 jun. 2017 a las 19:11
0

Modificamos el HTML para que el select tenga un id y las opciones el valor correspondiente:

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

Y en el JS al presionar los botones filtramos segun el valor en el select:

$("#a").click(function(){
   if($("#seleccion").val === "giosvel") {
      alert("Mi Apellido es CARRIL ");
   } else if($("#seleccion").val === "daniela") {
      alert("su segundo nombre es victoria");
   }
});
1
  • voy a probarlo muchas gracias Commented el 13 jun. 2017 a las 18:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.