Question

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

<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.

单击＃锚时，需要打开弹出窗口，提示输入数字，然后提交，自动选择该选项并将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锚点时，它需要做同样的事情，但只需将所选元素设置为相应的值（产品A自动选择选择到A等）

我在JavaScript中有一些东西可以使这个工作，但我希望它在jQuery中，并且我很难搞清楚它。

一些JS：锚点有onclick="var newNumUnits=prompt('How many of Product X do you want to default to? 'Enter amount here'); quickFill(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>

然后这种类型的锚点继续大约30多个组合，不同的U＃，不同的名称。需要发生的是，当单击带有文本的锚点时，会自动选择包含相同U＃的所有选择，并且当单击＃锚点时，会发生相同的事情，但也会将相应的textarea更改为提示中输入的数字。

Answer 1

您需要先对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

自动选择选项，并自动完成textarea值onclick

1 个答案:

更新，因为您向我展示了完整代码=）