Javascript 选择“选择”下拉列表后查找最近的输入文本

所以我要做的是，只要从下拉列表中选择了select name=change[]id=change[]，就用id championSpell[]更改输入的值。输入是动态生成的。val函数中的测试变量负责该更改，这是我遇到的问题

<script src="LeagueNotes/js/jquery.min.js"></script>
<script src="LeagueNotes/js/champions_list.js"></script>
<script src="LeagueNotes/js/jquery.validate.min.js"></script>
<style>
    * { font-family:Arial; }
    h2 { padding:0 0 5px 5px; }
    h2 a { color: #224f99; }
    a { color:#999; text-decoration: none; }
    a:hover { color:#802727; }
    p { padding:0 0 5px 0; }

    input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>

<h2>
    <a href="#" id="addChampion">Add Another Champion</a>
</h2>
<form name="second_form" id="second_form" action="#" method="POST" style="margin: 0;"  >
    <div id="p_scents">
        <p>    
            <label for="p_scnts">
                <input type="text" id="champion[]" size="20" list="champions" value=""  placeholder="Enter Champion's name">
                <datalist id="champions"></datalist>
                <a href="#" id="addGeneral">Add General Change</a><a></a>
                <a href="#" id="addSpell"> Add Spell</a><a></a>

            </label>
        </p>
    </div>
    <br/><input type="submit" value="submit">
</form>
<script>
    for(var key in champions){
                if(champions.hasOwnProperty(key)){
                    $('#champions').append('<option value="' + key + '">');

                }
            }
    var config = {
                      fillAll: true
                    };

                    document.forms["second_form"].oninput = function(e) {
                      var champion = this["champion[]"];

                      //Force into array
                      if (champion[0] === undefined)
                        champion = [this["champion[]"]];

                      var reached = {
                        valid: 0,
                        unique: 0
                      };

                      var inputs = [].map.call(champion, function(n) {
                        return n.value
                      }).filter(function(n) {
                        return n.length
                      });

                      var valid = [].every.call(champion, function(n, i) {
                        n.setCustomValidity("");
                        if (config.fillAll) return (reached.valid = i, champions.hasOwnProperty(n.value));
                        else return n.value ? (
                          reached.valid = i,
                          champions.hasOwnProperty(n.value) > -1
                        ) : true;
                      });

                      var unique = inputs.slice(0).sort().every(function(n, i, a) {
                        reached.unique = inputs.lastIndexOf(n);
                        return n != a[i - 1];
                      });

                      //Check for valid champions
                      if (!valid) {
                        champion[reached.valid].setCustomValidity("This is not a valid champion, please correct this field and resubmit.")
                      }

                      //Check for duplicates
                      if (!unique) {
                        champion[reached.unique].setCustomValidity("This champion has already been entered.")
                      }

                      this.checkValidity();
                    };

    function change(x, dblchamp){
        if(dblchamp===true){
            if(x==="Passive"){x=0;}
            if(x==="Q"){x=1;}
            if(x==="Q2"){x=2;}
            if(x==="W"){x=3;}
            if(x==="W2"){x=4;}
            if(x==="E"){x=5;}
            if(x==="E2"){x=6;}
            if(x==="R"){x=7;}
            if(x==="R2"){x=8;}


        }else if(dblchamp===false){
            if(x==="Passive"){x=0;}
            if(x==="Q"){x=1;}
            if(x==="W"){x=2;}
            if(x==="E"){x=3;}
            if(x==="R"){x=4;}
        }
        console.log(x);
        return x;
    }
    function val(elm) {
        var championsWithExtraSpells = ["Aatrox", "Elise", "Fizz", "Heimerdinger", "Jayce", "Lee Sin", "Nidalee", "Rek'Sai","Twisted Fate"];
        //var championName = $("#change").closest('input').val();
        //var championName =$("#champion\\[\\]").val();
         var championName = $(elm).closest("label").find("input").val();
        //document.getElementById("champion[]").value;
        console.log(championName);

        if($.inArray(championName, championsWithExtraSpells)==-1){
            var existsInArray = false;}
        else{
            var existsInArray = true;}
         var d = $(elm).val();
        var spellname = document.getElementById("championSpell[]");
        var z = champions[""+championName+""][change(d, existsInArray)];
        test =  $(elm).nextAll("input").first().val('test'); 
        test.value=champions[""+championName+""][change(d, existsInArray)];

    }

    $(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents label').size() + 1;
        var j =0;
        $('body').on('click', '#addChampion', function() {
            $('<p><a href="#" id="remScnt">Remove</a><br><label for="p_scnts"><input type="text" id="champion[]" size="20" list="champions" name="champion[]" value="" placeholder="Enter Champion\'s name" /><datalist id="champions"></datalist><a href="#" id="addGeneral">Add General Change</a><a href="#" id="addSpell"> Add Spell</a><a></a></label></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('body').on('click', '#remScnt', function() { 
                if( i >2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });

         $('body').on('click', '#addGeneral',function() { 
               $(
               '<p><label for="var"><textarea type="text" id="champion[]" size="20" name="GeneralChange[]" value="" placeholder="Enter Description" /><select><option value="buff">Buff</option><option value="nerf">Nerf</option><option value="new">New</option><option value="change">Change</option><option value="bugfix">Bugfix</option></select></label> <a href="#" id="remVar">Remove Change</a></p>').appendTo($(this).next()); 
                j++;
                return false;
        });


        $('body').on('click', '#remVar',function() { 
                        $(this).parent('p').remove();
                return false;
        });

        $('body').on('click', '#addSpell',function() { 
               $(
               '<p><select name="change[]" id="change[]" onchange="val(this)"><option value="Passive">Passive</option><option value="Q" selected>Q</option><option value="W">W</option><option value="E">E</option><option value="R">R</option></select><label for="var"><input type="text" id="championSpell[]" readOnly="true"><br><textarea type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Description" /><select><option value="buff">Buff</option><option value="nerf">Nerf</option><option value="new">New</option><option value="change">Change</option><option value="bugfix">Bugfix</option></select></label> <a href="#" id="addGeneral">Add Change</a> <a href="#" id="remVar">Remove Spell</a></p>').appendTo($(this).next());
                return false;
        });
});
</script>

---

你的帖子确实让人困惑，但是如果你试图获取一个输入文本的值，它同时在你的下拉菜单中，可以包含不同的值。您只需要在jQuery代码中使用select函数

类似于此：

 $('#dropdown :selected').text();

---

你的帖子确实让人困惑，但是如果你试图获取一个输入文本的值，它同时在你的下拉菜单中，可以包含不同的值。您只需要在jQuery代码中使用select函数

类似于此：

 $('#dropdown :selected').text();

---

您可以将change方法与switch语句一起使用，如下所示：

HTML:

以下是一个工作示例：

---

您可以在使用switch语句的同时使用change方法，如下所示：

HTML:

以下是一个工作示例：

---

---

你能试着澄清你正在尝试做什么/想做什么吗？请，只发布最简单的代码来复制你的问题。@Ishettyl上次我尝试时，每个人都抱怨我给出了完整的代码。你能试着澄清你正在尝试做什么/想做什么吗？请，只发布最简单的代码来复制您的问题。@Ishettyl上次我尝试时，每个人都抱怨我给出了完整的代码。我尝试根据下拉列表中选择的内容更改输入文本的值menu@Higeath很抱歉我仍然不明白这样做的目的：您想根据下拉菜单中选择的内容更改输入文本的值。输入的值是它包含的文本。如果从下拉列表中选择某个内容，则这将是输入文本的值。使用选择下拉菜单然后更改动态输入文本的内容的目的是什么？我不明白。一场游戏中有不同的冠军，你会得到一个下拉列表，上面有他们的名字，你选一个，每个冠军有5个被动q w e r法术，当你选择其中一个时，它只会在输入框中显示该法术的名字。我试图根据下拉列表中选择的内容更改输入文本的值menu@Higeath 很抱歉，我仍然不明白这样做的目的：您想根据在下拉菜单中选择的内容更改输入文本的值。输入的值是它包含的文本。如果从下拉列表中选择某个内容，则这将是输入文本的值。使用选择下拉菜单然后更改动态输入文本的内容的目的是什么？我不明白。一场游戏中有不同的冠军，你会得到一个下拉列表，上面有他们的名字，你选择一个，每个冠军有5个被动q w e r法术，当你选择其中一个时，它只会在输入框中显示该法术的名字OK，然后只需将设置值的函数更改为：$'champion\\['+a1+'\\\]“.valinputValue；然后动态拉取变量名，例如在本例中为a1，并在更改前设置其值。如果[]中没有变量，如何从[]中拉取该值？如果您希望为每个不同的选择提供不同的输入，则需要为每个输入提供唯一的id，因此，您将在[]中有某种类型的值，然后只需获取id值并将其分配给变量，然后将其推送到更改中。ID应始终是唯一的，并且不得在页面上重复。如果希望多个元素具有相同的ID，请将ID用作类。此外，在更改函数中，不要使用多个“If”语句，而是使用switch语句替换它们，这样可以使代码更有条理和可读性。确定后，只需更改将值设置为以下值的函数：$'champion\\\['+a1+'\\\]“.valinputValue；然后动态拉取变量名，例如在本例中为a1，并在更改前设置其值。如果[]中没有变量，如何从[]中拉取该值？如果您希望为每个不同的选择提供不同的输入，则需要为每个输入提供唯一的id，因此，您将在[]中有某种类型的值，然后只需获取id值并将其分配给变量，然后将其推送到更改中。ID应始终是唯一的，并且不得在页面上重复。如果希望多个元素具有相同的ID，请将该ID用作类。此外，在更改函数中，不要有多个“If”语句，而要将它们替换为switch语句，这样可以使代码更具组织性和可读性。

var inputValue;

$('select').on('change', function() {
    var selectedValue = $(this).val();

    switch(selectedValue) {
        case 'volvo':
            inputValue = 'volvo';
            break;
        case 'saab':
            inputValue = 'saab';
            break;
        case 'mercedes':
            inputValue = 'mercedes';
            break;
        case 'audi':
            inputValue = 'audi';
            break;
        default:
            break;
    }

    $('#champion').val(inputValue);

});