Soy muy nuevo en javascript. Así que tengo un seleccionar una opción y un campo de entrada. Lo que quiero lograr es tener el valor del campo de entrada cuando lo seleccione una opción en particular. Esto es lo que he intentado:

First Name: <input type="text" value="colors">

<select name="">
   <option>Choose Database Type</option>
   <option onclick="myFunction(g)>green</option>
   <option onclick="myFunction(r)>red</option>
   <option onclick="myFunction(o)>orange</option>
   <option onclick="myFunction(b)>black</option>
</select>

<script>
function myFunction(g) {
    document.getElementById("myText").value = "green";
}
function myFunction(r) {
    document.getElementById("myText").value = "red";
}
function myFunction(o) {
    document.getElementById("myText").value = "orange";
}
function myFunction(b) {
    document.getElementById("myText").value = "black";
}
</script>
  • 1. Por favor, piense en el principio SECO. 2. Usted no tiene ningún elemento con un ID de «texto». 3. Que está pasando en parámetros que no están definidos. 4. No los use.
  • Sin tratar de sonar demasiado media/dura, me permito sugerir que usted vaya fuera y siga básicos de JavaScript tutoriales antes de formular sus preguntas, como si supiera que incluso una pequeña cantidad de JS sabrías el problema.
  • 5. sus funciones tienen el mismo nombre, y así está sobreescribiendo el anterior, que es el principal problema de la omi
  • Posibles duplicados de onchange seleccione la casilla de
  • verdadero. Era más de orden de la primera notificación de nada…
InformationsquelleAutor Daniel C. | 2017-06-21

7 Comentarios

  1. 18

    Un par de cosas:

    Debe utilizar el onchange función, en lugar de onclick en cada opción.

    Utilizar un value atributo en cada opción para almacenar los datos, y el uso de una instancia de this para asignar el cambio (o event.target)

    Usted no tiene ninguna ID en el campo de texto

    Que te estás perdiendo el fin de la cita para su onclick función

    <select name="" onchange="myFunction(event)">
        <option disabled selected>Choose Database Type</option>
        <option value="Green">green</option>
        <option value="Red">red</option>
        <option value="Orange">orange</option>
        <option value="Black">black</option>
    </select>

    Y la función:

    function myFunction(e) {
        document.getElementById("myText").value = e.target.value
    }

    Y agregar el ID de

    <input id="myText" type="text" value="colors">

    Violín: https://jsfiddle.net/gasjv4hs/

    • Como he mencionado, yo soy muy nuevo en javascript. Gracias Mucho por la explicación. Se trabajó a cabo!
    • Por favor, he tratado de implementar esto en CKEditor pero no funciona. ¿Tiene usted una idea de cómo puedo hacer que funcione?
    • Lo siento, no estoy muy familiarizado con CKEditor – supongo que tiene que ver con la colocación de la secuencia de comandos – asegúrese de que el script se carga después de que el HTML.
  2. 1

    Más adecuada forma de hacerlo es colocar su código JS en una diferente .archivo js y el uso de Jquery como cuando usted vaya más lejos con su programación este es el camino correcto.

    HTML

    <input type="text" id="color" name="color">
    <select name="" id="changeData">
    <option>Choose Database Type</option>
    <option data-value="green">green</option>
    <option data-value="red">red</option>
    <option data-value="orange">orange</option>
    <option data-value="black">black</option>
    </select>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script>

    Su JS

    $(document).ready(function () {     
    $('#changeData').change(function(){
    var color = $(this).val();
    $('#color').val(color);
    })
    });

    También asegúrese de que usted ha añadido Biblioteca de Jquery para su Proyecto. Usted puede descargar Jquery y agregar en la carpeta de proyecto O también puede utilizar el CDN. en este ejemplo, la CDN se utiliza.

  3. 1

    Se me ocurrió un problema similar. En mi caso yo estaba tratando de cambiar el valor mínimo de entrada basándose en el valor de una opción en una lista de selección. Traté de aplicar las anteriores soluciones, pero nada funcionó. Así que me vino con este, el cual puede ser aplicado a problemas similares a los de esta

    HTML

    <input id="colors" type="text" value="">
    
    <select id="select-colors" name="" onchange="myFunction()">
       <option disabled selected>Choose Colour</option>
       <option value="green">green</option>
       <option value="red">red</option>
       <option value="orange">orange</option>
       <option value="black">black</option>
    </select>

    JS

    function myFunction() {
    var x = document.getElementById("select-colors").value;
    document.getElementById("colors").value = x;
      }

    Esto funciona, obteniendo el valor de la selección con id «seleccione colores» en cada cambio, la asignación a una variable «x» e insertar en el valor de la entrada con id «colores». Esto puede ser implementado en cualquier caso, basado en el problema

  4. 0

    Crear funciones con el mismo nombre varias veces.

    Sólo duran uno va a trabajar.

    las variables que pasar g,r,o,b son indefinidos.

    No agregar onclick a option agregar onchange a select.

    Hacer uso de HTML5 data-* atributo

    JS:

    function myFunction(element) {
      document.getElementById("myText").value = element;
    }

    HTML:

    First Name: <input type="text" id="myText" value="colors">
    
    <select name="" onchange="myFunction(this.value);">
       <option>Choose Database Type</option>
       <option data-value="green">green</option>
       <option data-value="red">red</option>
       <option data-value="orange">orange</option>
       <option data-value="black">black</option>
    </select>

    • Por favor, he tratado de implementar esto en CKEditor pero no funciona. ¿Tiene usted una idea de cómo puedo hacer que funcione?
  5. 0

    Puede resolver de esta manera.

    ` Nombre:

    <select name="" onchange="myFunction()" id="selectID">
       <option>Choose Database Type</option>
       <option >green</option>
       <option >red</option>
       <option >orange</option>
      <option >black</option>
    </select>
    
    <script>
    function myFunction() {
        var selectItem = document.getElementByID('selectID').value;
         document.getElementByID('yourId').value = sekectItem;
    
    }
    </script>
  6. 0

    Aquí una manera de lograr que:

    JS:

    var select = document.getElementById('colorName');
    
    function myFunction(event) {
      var color = 'No color selected';
    
      if (select.selectedIndex > 0) {
        color = select.item(select.selectedIndex).textContent;
      }
      
      document.getElementById('myText').value = color;
    }
    
    select.addEventListener('click', myFunction);
    
    myFunction();

    HTML:

    First Name: <input type="text" id="myText">
    
    <select id="colorName">
       <option>Choose Database Type</option>
       <option>green</option>
       <option>red</option>
       <option>orange</option>
       <option>black</option>
    </select>

    • Por favor, he tratado de implementar esto en CKEditor pero no funciona. ¿Tiene usted una idea de cómo puedo hacer que funcione?
  7. 0

    El código debe ser como la siguiente.

    <input type="text" name="color" id="color">
     <select name="" id="change_color">
        <option>Choose Database Type</option>
       <option >green</option>
         <option >red</option>
        <option >orange</option>
       <option >black</option>
    </select>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
        $(document).ready(function () {     
        $('#change_color').change(function(){
        var color = ($(this).val());
        $('#color').val(color);
        })
        });
    </script>
    • Por favor, he tratado de implementar esto en CKEditor pero no funciona. ¿Tiene usted una idea de cómo puedo hacer que funcione?

Dejar respuesta

Please enter your comment!
Please enter your name here