如何根据selectbox的值显示或隐藏行？

模式是这样的，我使用选择框和文本

SelectBox - country
SelectBox - *county1*  Text-*countyText1*
SelectBox - *county2*  Text-*countyText2*
SelectBox - *county3*  Text-*countyText3*

根据国家的价值，我将显示或隐藏一行。我的意思是，如果country的值为1，则将显示county1 selectbox和countytext1，其他值将被隐藏。
如果country的值为2，则隐藏第三行，显示前两行，
怎么做？
我不想使用if-else语句，因为这只是一个示例。可能不止三个值有更多的值。。。
我尽量做到：

var source = document.getElementsByName("country")[0];
var sourceValue = source.options[source.value]; // sourceValue will be 1 or 2 or 3 for this example

var showHideArray = ["county1","county2","county3"];
for (var i = 0; i<showHide.array.length; i++){
    if(source.value>i){
        document.getElementByname[showHideArray[i]].setAttribute("type","display:show")
    } else{
        document.getElementByname[showHideArray[i]].setAttribute("type","display:none")

    }
}

我确信我在写作时会犯错误 "display:show" ，但我怎样才能做我想做的事呢？我还想隐藏所有行、选择框和文本
这里是html部分

<div id="preloader" ng-show="isLoadingOnFormPage">
    <div></div>
</div>
<div class="panel">
    <div class="panel-body">
        <button type="button" ng-click="goBack()" class="btn btn-default">
            <i class="ion-arrow-left-c tab-top-icon"></i>&nbsp;{{ 'BACK_BUTTON' |
            translate}}
        </button>
        <div class="form_version_block">{{ 'FORM_VERSION_MENUTITLE' |
            translate }} : {{selectedFormVersion}}</div>

        <form id="pageForm" name="formInf.mainForm" novalidate
            class="form-style">
            <h3 align="center" ng-if="!page.isPageNameHide">
                <b>{{page.title}}</b>
            </h3>
            <div id="tpl-content"
                ng-include="'app/form-page/component-page.html'"></div>
        </form>
    </div>
</div>
<div ng-if="page.navigations.length != 0" class="tabs tabs-balanced">
    <div class="tab-item" ng-repeat="navigation in page.navigations">
        <div ng-if="navigation.functions.functionType.id == 3">
            <a ng-click="navigate(navigation)" class="form-tab-color" ng-disabled="disableTab">
                {{navigation.name}} </a>
        </div>
        <div ng-if="navigation.functions.functionType.id != 3">
            <a 
                class="form-tab-color"
                ng-click="clickEvent(navigation.functions.functionDetail)">
                {{navigation.name}} </a>
        </div>
    </div>

</div>

如果我理解正确的话，你想展示和隐藏一些 textbox 基于您的selectbox值。
你必须经历所有的困难 options 设定 display=none 用于除所选选项值之外的所有对应文本（基于名称）。对于所选选项值，必须找到对应的 textbox 设定 display=inline or block ```
function change() {
var source = document.getElementsByName("country")[0];

        for (var i = 0; i < source.options.length; i++) {
            if (source.selectedOptions[0].value == source.options[i].value) {
                document.getElementsByName(source.options[i].value)[0].style.display = "inline";
                document.getElementsByName(source.options[i].value)[0].value = source.options[i].value;

            }
            else
                document.getElementsByName(source.options[i].value)[0].style.display = "none";
        }
    }

<div>
    county3: <input type="text" name="county3" />
</div>

如何根据selectbox的值显示或隐藏行？

1条答案

相关问题

热门标签

最新问答