javascript - 自动选择选项和单击时自动完成文本区域值

假设有一个链接(实际上是两个链接)，每个链接都应该做类似的事情，每个链接都做不同的事情。

<a style="cursor:pointer;" name="A">#</a>
<a style="cursor:pointer;" name="A">Product A</a>
<a style="cursor:pointer;" name="B">#</a>
<a style="cursor:pointer;" name="B">Product B</a>
etc.

单击 # anchor 时，需要打开一个弹出窗口，提示输入数字，然后在提交时自动选择该选项并将 textarea 值设置为输入的数字。

<select>
    <option selected="selected" value="0"></option>             
    <option value="A">Spies</option>                            
    <option value="B">Militia</option>      
</select>   
</td>
<td><input value="0" type="text"></td>

但是当单击 Product anchor 时，它需要执行相同的操作，但只需将所选元素设置为相应的值(Product A 自动选择选择到 A 等)

我在 JavaScript 中有一些东西可以完成这项工作，但我希望它在 jQuery 中，但我很难弄清楚它。

一些JS: anchor 有 onclick="var newNumUnits=prompt('How much of Product X do you want to default to? 'Enter amount here'); fastFill(1111115,newNumUnits);"，这会引起注意很多东西，但它变得“大”和“复杂”，我真的很希望看到代码在 jQuery 中变得更容易(如果可能的话)。

function quickFill(ProdID, num) {
    for(i=0; i<document.myForm.elements.length; i++) {
        fieldname = document.myForm.elements[i].name;
        fieldvalue = document.myForm.elements[i].value;
        if (fieldname.indexOf("_") != -1) {
            fieldNameArray = fieldname.split("_");
            smallFieldName = fieldNameArray[0];
            myPUID = fieldNameArray[1];
            if (smallFieldName == "ProdID") {
                selectfield = document.myForm.elements[i];
                for (var j=0; j<selectfield.options.length;j++) {
                    if (selectfield.options[j].value == ProdID) {
                        selectfield.options[j].selected=true;
                        textinputfield = document.getElementById("num_"+myPUID);
                        textinputfield.value=num;
                    }
                }
            }
        }
    }
    updateStatus();
}

如有任何帮助，我们将不胜感激。

编辑:我当前正在使用的实际的、未经编辑的代码:

<tr class="L1">
    <td></td>
    <td><a href="map.php?x=1898&y=2018">1898, 2018</a>
    </td>
    <td>9</td>
    <td><a href="structDetail.php?x=1898&y=2018">Combat Outpost</a>
    </td>
    <td>
        <select name="struct[213][str]">
            <option selected="selected" value="0"></option>
            <option value="U2" data-price="4000">Blackshirts</option>
            <option value="U3" data-price="6000">Spies</option>
            <option value="U4" data-price="8000">Partisans</option>
            <option value="U7" data-price="15000">Rebels</option>
            <option value="U11" data-price="80000">Oerlikon Cannons</option>
        </select>
    </td>
    <td>
        <input size="2" maxlength="4" class="txt" name="struct[213][numUnits]" value="0" type="text">
    </td>
</tr>
<tr class="L2">
    <td></td>
    <td><a href="map.php?x=1900&y=2018">1900, 2018</a>
    </td>
    <td>9</td>
    <td><a href="structDetail.php?x=1900&y=2018">Combat Outpost</a>
    </td>
    <td>
        <select name="struct[329][str]">
            <option selected="selected" value="0"></option>
            <option value="U2" data-price="4000">Blackshirts</option>
            <option value="U3" data-price="6000">Spies</option>
            <option value="U4" data-price="8000">Partisans</option>
            <option value="U7" data-price="15000">Rebels</option>
            <option value="U11" data-price="80000">Oerlikon Cannons</option>
        </select>
    </td>
    <td>
        <input size="2" maxlength="4" class="txt" name="struct[329][numUnits]" value="0" type="text">
    </td>
</tr>
<tr class="L2">
    <td></td>
    <td><a href="map.php?x=1901&y=2018">1901, 2018</a>
    </td>
    <td>9</td>
    <td><a href="structDetail.php?x=1901&y=2018">Military Installation</a>
    </td>
    <td>
        <select name="struct[330][str]">
            <option selected="selected" value="0"></option>
            <option value="U1" data-price="1200">K-9 Corps</option>
            <option value="U5" data-price="9000">Riflemen</option>
            <option value="U6" data-price="11000">Sappers</option>
            <option value="U8" data-price="24000">J&#228;gers</option>
            <option value="U9" data-price="27000">Commandos</option>
            <option value="U10" data-price="33000">Red Berets</option>
            <option value="U12" data-price="110000">Ford GPW</option>
            <option value="U13" data-price="222000">M3 Half-tracks</option>
            <option value="U14" data-price="350000">7TP</option>
        </select>
    </td>
    <td>
        <input size="2" maxlength="4" class="txt" name="struct[330][numUnits]" value="0" type="text">
    </td>
</tr>
<tr class="L2">
    <td></td>
    <td><a href="map.php?x=1901&y=2017">1901, 2017</a>
    </td>
    <td>9</td>
    <td><a href="structDetail.php?x=1901&y=2017">Light Airfield</a>
    </td>
    <td>
        <select name="struct[331][str]">
            <option selected="selected" value="0"></option>
            <option value="U15" data-price="155000">PZL.23 Kara&#347;</option>
            <option value="U16" data-price="175000">R-4 Hoverfly</option>
            <option value="U17" data-price="650000">PZL P.11</option>
            <option value="U18" data-price="1050000">P-39 Airacobra</option>
            <option value="U19" data-price="1500000">C-46 Commando</option>
        </select>
    </td>
    <td>
        <input size="2" maxlength="4" class="txt" name="struct[331][numUnits]" value="0" type="text">
    </td>
</tr>

我之前在 JavaScript 中尝试过的一些东西是有效的(与上面发布的 QuickFill 函数一起使用:

<a style="cursor:pointer;" onclick="var newNumUnits=prompt('How many units do you want to default to? \nClick the unit name instead of the number sign to skip this step.','Enter amount here'); quickFill(U3,newNumUnits);">#</a>
<a style="cursor:pointer;" onclick="quickFill(U3);">Spies</a>
<br>
<a style="cursor:pointer;" onclick="var newNumUnits=prompt('How many units do you want to default to? \nClick the unit name instead of the number sign to skip this step.','Enter amount here'); quickFill(U2,newNumUnits);">#</a>
<a style="cursor:pointer;" onclick="quickFill(U2);">Blackshirts</a>

这种风格的 anchor 会继续出现大约 30 个以上的组合、不同的 U#、不同的名称。需要发生的是，当单击带有文本的 anchor 时，所有包含相同 U# 的选择都会自动选择到它，并且当单击 # anchor 时，会发生相同的事情，但也会将相应的文本区域更改为在提示中输入的数字。

最佳答案

您需要对 HTML <a> 进行一些更改首先标记:

<a style="cursor:pointer;" name="A" data-type="hash">#</a>
<a style="cursor:pointer;" name="A" data-type="product">Product A</a>
<a style="cursor:pointer;" name="B" data-type="hash">#</a>
<a style="cursor:pointer;" name="B" data-type="product">Product B</a>

<select>
    <option selected="selected" value="0"></option>               
    <option value="A">Spies</option>                          
    <option value="B">Militia</option>        
</select>   
<input value="0" type="text">

现在在 jQuery 中，您需要监听 <a> 的点击事件。标签:

$(document).ready(function(){
    $('a').on('click', function (e) {

        e.preventDefault();

        var a_name = $(this).attr('name');

        if ($(this).data('type') === 'hash') {
            var answer = prompt('Type your selection', '');

            $('select option').prop('selected', false);
            $('select option[value="' + a_name + '"]').prop('selected', true);
            $('input').val(answer);
        } else if ($(this).data('type') === 'product') {
            $('select option').prop('selected', false);
            $('select option[value="' + a_name + '"]').prop('selected', true);
        }
    });
});

<强> JSFIDDLE DEMO

自从您向我展示了完整代码以来就进行了更新 =)

HTML

<table id="someID">
    <tr class="L1">
        <td></td>
        <td><a href="map.php?x=1898&y=2018">1898, 2018</a>

        </td>
        <td>9</td>
        <td><a href="structDetail.php?x=1898&y=2018">Combat Outpost</a>

        </td>
        <td>
            <select name="struct[213][str]">
                <option selected="selected" value="0"></option>
                <option value="U2" data-price="4000">Blackshirts</option>
                <option value="U3" data-price="6000">Spies</option>
                <option value="U4" data-price="8000">Partisans</option>
                <option value="U7" data-price="15000">Rebels</option>
                <option value="U11" data-price="80000">Oerlikon Cannons</option>
            </select>
        </td>
        <td>
            <input size="2" maxlength="4" class="txt" name="struct[213][numUnits]" value="0" type="text">
        </td>
    </tr>
    <tr class="L2">
        <td></td>
        <td><a href="map.php?x=1900&y=2018">1900, 2018</a>

        </td>
        <td>9</td>
        <td><a href="structDetail.php?x=1900&y=2018">Combat Outpost</a>

        </td>
        <td>
            <select name="struct[329][str]">
                <option selected="selected" value="0"></option>
                <option value="U2" data-price="4000">Blackshirts</option>
                <option value="U3" data-price="6000">Spies</option>
                <option value="U4" data-price="8000">Partisans</option>
                <option value="U7" data-price="15000">Rebels</option>
                <option value="U11" data-price="80000">Oerlikon Cannons</option>
            </select>
        </td>
        <td>
            <input size="2" maxlength="4" class="txt" name="struct[329][numUnits]" value="0" type="text">
        </td>
    </tr>
    <tr class="L2">
        <td></td>
        <td><a href="map.php?x=1901&y=2018">1901, 2018</a>

        </td>
        <td>9</td>
        <td><a href="structDetail.php?x=1901&y=2018">Military Installation</a>

        </td>
        <td>
            <select name="struct[330][str]">
                <option selected="selected" value="0"></option>
                <option value="U1" data-price="1200">K-9 Corps</option>
                <option value="U5" data-price="9000">Riflemen</option>
                <option value="U6" data-price="11000">Sappers</option>
                <option value="U8" data-price="24000">J&#228;gers</option>
                <option value="U9" data-price="27000">Commandos</option>
                <option value="U10" data-price="33000">Red Berets</option>
                <option value="U12" data-price="110000">Ford GPW</option>
                <option value="U13" data-price="222000">M3 Half-tracks</option>
                <option value="U14" data-price="350000">7TP</option>
            </select>
        </td>
        <td>
            <input size="2" maxlength="4" class="txt" name="struct[330][numUnits]" value="0" type="text">
        </td>
    </tr>
    <tr class="L2">
        <td></td>
        <td><a href="map.php?x=1901&y=2017">1901, 2017</a>

        </td>
        <td>9</td>
        <td><a href="structDetail.php?x=1901&y=2017">Light Airfield</a>

        </td>
        <td>
            <select name="struct[331][str]">
                <option selected="selected" value="0"></option>
                <option value="U15" data-price="155000">PZL.23 Kara&#347;</option>
                <option value="U16" data-price="175000">R-4 Hoverfly</option>
                <option value="U17" data-price="650000">PZL P.11</option>
                <option value="U18" data-price="1050000">P-39 Airacobra</option>
                <option value="U19" data-price="1500000">C-46 Commando</option>
            </select>
        </td>
        <td>
            <input size="2" maxlength="4" class="txt" name="struct[331][numUnits]" value="0" type="text">
        </td>
    </tr>
</table>
<hr />
<div id="quickChoice"> <a style="cursor:pointer;">#</a>

<a style="cursor:pointer;">Spies</a>

    <br>
<a style="cursor:pointer;">#</a>

<a style="cursor:pointer;">Blackshirts</a>

    <br>
<a style="cursor:pointer;">#</a>

<a style="cursor:pointer;">Riflemen</a>

    <br>
<a style="cursor:pointer;">#</a>

<a style="cursor:pointer;">Sappers</a>

    <br>
<a style="cursor:pointer;">#</a>

<a style="cursor:pointer;">R-4 Hoverfly</a>

</div>

jQuery

$(document).ready(function(){
    $('div#quickChoice').on('click', 'a', function (e) {
        // dont allow the <a> to perform its default functionality
        e.preventDefault();

        // get content of <a> tag
        var contents = $(this).text();

        // user clicked hash symbol
        if (contents === '#') {

            // get the contents of next available <a> tag
            var select_choice = $(this).next('a').text();

            // promp for number
            var answer = prompt('Type your selection', '');

            // go through table
            // find any <selects> that have <options>
            // filter options based on <a> contents next to hash
            // make it selected
            // for each matching <option> go to parent <td> and find the next <td> because we need to populate the <input> tag
            // populate the <input>
            $('table#someID')
                .find('select')
                .find('option')
                .filter(function () {
                    if ($(this).text() === select_choice) {
                        return true;
                    } else {
                        return false;
                    }
                }).prop('selected', true)
                    .each(function () {
                        $(this)
                            .parents('td')
                            .first()
                            .next('td')
                            .find('input[type="text"]')
                            .val(answer);
                    });

        } else {

            // user did not click hash but rather the text value
            var select_choice = $(this).text();

            // same as above but we don't have to populate the <input> at all
            $('table')
                .find('select')
                .find('option')
                .filter(function () {
                    if ($(this).text() === select_choice) {
                        return true;
                    } else {
                        return false;
                    }
                }).prop('selected', true);
        }
    });
});

<强> JSFIDDLE DEMO

关于javascript - 自动选择选项和单击时自动完成文本区域值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21292964/

javascript - 自动选择选项和单击时自动完成文本区域值

自从您向我展示了完整代码以来就进行了更新 =)

上一篇：javascript - x-可编辑保存后重新渲染部分

下一篇：javascript - 从多选 jQuery UI 小部件动态添加复选框