Question

我有这样的表格： http://leagueipsum.blogspot.com.br/2015/05/blog-post.html

＆＃13;

<table>
 <tbody>
<tr><td><div class="current_tier">
<select id="ct">
            <option value="b">Bronze</option>
            <option value="s">Prata</option>
            <option value="g">Ouro</option>
            <option value="p">Platina</option>
            <option value="d">Diamante</option>
</select>
<select id="cd">
            <option>5</option>
            <option>4</option>
            <option>3</option>
            <option>2</option>
            <option>1</option>
</select>
        </div>
</td>

<td><div class="desired_tier">
<select id="dt">
            <option value="b">Bronze</option>
            <option value="s">Prata</option>
            <option value="g">Ouro</option>
            <option value="p">Platina</option>
            <option value="d">Diamante</option>
</select>
      <select id="dd">
            <option>5</option>
            <option>4</option>
            <option>3</option>
            <option>2</option>
            <option>1</option>
</select>
        </div>
</td></tr>
</tbody></table>

＆＃13;

我想再增加两个选项：

            <option value="b">Bronze</option>
            <option value="s">Prata</option>
            <option value="g">Ouro</option>
            <option value="p">Platina</option>
            <option value="d">Diamante</option>
            <option value="m">Mestre</option>
            <option value="c">Desafiante</option>

但是这两个新选项没有1-5选项，每次选择其中一个选项时，如何禁用数字选项？

Answer 1

使用Javascript：

你可以这样做：

function validate() {
    var selectTags = document.getElementById("current_tier");
    var selectedValue = selectTags.options[selectTags.selectedIndex].value;
    if (selectedValue == "m" && "c") {
         document.getElementById("dd").disabled=true;
    }
}

查看此链接以获取更多信息：

How to check if an item is selected from an HTML drop down list?

使用jQuery：

您也可以使用jQuery来完成它。首先，确保在头标记中包含了jQuery库。只需在头标记中复制以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

然后你应该给这两个选项一个id。例如：

<option value="m" id="special">Mestre</option>
<option value="c" id="special">Desafiante</option>

然后只需在头标记中添加以下代码：

$(document).ready(function(){
     if ($("#special").is(":checked")) {
         $('#dd').prop('disabled', 'disabled');
     }
     else {
         $('#pizza_kind').prop('disabled', false);
     }
})

Answer 2

使用javascript

<html>
    <head>
    <title></title>
    </head>
    <body>
    <table>
    <tbody>
    <tr><td><div class="current_tier">
    <select id="ct" onChange="y();">
        <option value="b">Bronze</option>
        <option value="s">Prata</option>
        <option value="g">Ouro</option>
        <option value="p">Platina</option>
        <option value="d">Diamante</option>
        <option value="m">Mestre</option>
        <option value="c">Desafiante</option>
    </select>
    <select id="cd">
        <option>5</option>
        <option>4</option>
        <option>3</option>
        <option>2</option>
        <option>1</option>
    </select>
    </div>
    </td>

    <td><div class="desired_tier">
    <select id="dt" onChange="x();">
        <option value="b">Bronze</option>
        <option value="s">Prata</option>
        <option value="g">Ouro</option>
        <option value="p">Platina</option>
        <option value="d">Diamante</option>
        <option value="m">Mestre</option>
        <option value="c">Desafiante</option>
    </select>
    <select id="dd">
        <option>5</option>
        <option>4</option>
        <option>3</option>
        <option>2</option>
        <option>1</option>
    </select>
    </div>
    </td></tr>
    </tbody></table>
    <script>
    var ct = document.getElementById("ct");
    var dt = document.getElementById("dt");


    function y() {
    if (ct.value == "m" || ct.value == "c" ) {
    document.getElementById('cd').style.display="none";
    } else {
    document.getElementById('cd').style.display="inline-block";
    }
    }

    function x() {
    if (dt.value == "m" || dt.value == "c" ) {
    document.getElementById('dd').style.display="none";
    } else {
    document.getElementById('dd').style.display="inline-block";
    }
    }

    </script>   
    </body>

    </html>

所以我们首先在select标签上添加一个on change，这样当我们选择其中一个选项时，它会触发一个函数。在函数内部，我们想检查我们是否选择了那两个，然后如果我们选择它们隐藏数字选项。

创建规则以禁用表单中的某些选项

2 个答案: