Javascript与选择框值进行比较以启用选择框

时间:2015-06-03 14:16:09

标签: javascript html

我想要做的是使用Javascript检查选择框的值,如果用户选择了正确的值,它将解锁下两个选择框。

“报告”下拉框包含多个供用户选择的选项,最终我想根据所选值决定打开哪些选择框。

对于我的第一次尝试,我希望能够检查报告下拉列表中的'ClaimsBySupplier',如果结果是真的那么它将解锁供应商名称下拉框和查看期间下拉框。 JS:

#include<stdio.h>
#include<conio.h>
#include<stdlib.h>
void main()
{
  int mbt[50];
  int i, j, k, pa, bs, bfree, bfree_mode, ps, js, var = 0, var2=0, jn, job;

clrscr();
    printf("\n\t\t PAGING\n");

    printf("\n\t Enter the physical address space:");
        scanf("%d",&pa);
    printf("\n\t Enter the Block size:");
        scanf("%d",&bs);
    bfree = pa / bs;
    printf("\n\t the number of blocks are = %d\n",bfree);
    bfree_mode = bfree;
    for( i = 0 ; i < bfree ; i++ ) {
        mbt[i] = 0;
    }

    printf("How many jobs do you want to enter to the memory ?\n");
        scanf("%d",&jn);
       for ( j = 0 ; j <= jn+2 ; j++  )  {

        printf("Enter %d Job size :\n",j+1);
            scanf("%d",&job);
        k = var;
        var = job / bs ;
        if (job % bs !=0)
            var +=1;
        if ( var <= bfree ) {
            var2 += var;
            for ( k ; k < var2 ; k++  ) {
                mbt[k] = j+1;
            }
            bfree -= var;
            printf("mbt[0] = OS Reserved!\n");
            for ( i = 1 ; i < bfree_mode ; i++)
                printf("mbt[%d] = %d\n",i,mbt[i]);


        }else if ( var > bfree ) {
            printf("\nThe Memory is not enough for the %d Job",j+1);
            break;
          }
    }

getch();
}

HTML:

function valueChanged() {

        var rdd = document.getElementById("ReportDD").value;
        var sdd = document.getElementById("SuppNameDD");

        if (rdd.valueOf("ClaimsBySupplier")) sdd.disabled = false;

    }

我不能流利使用Javascript,可以提供一些帮助。

4 个答案:

答案 0 :(得分:1)

我更喜欢在数据属性中的字段之间存储依赖关系。每个输入或选择都将拥有自己的data-dependencies属性,并带有特定格式的字符串,以指定启用它所需的条件。条件定义为(多个)键/值对,其中key是表单中另一个输入的名称。

此方法允许您制作多用途脚本。 请查看代码。

&#13;
&#13;
height:360
width:360
x:180
y:300
&#13;
function DependentInput (input, form) {
    this.input = input;
    this.form = form;
    this.parseDeps();
    this.checkDeps();
    
    var self = this;
    form.addEventListener('change', function () {
        self.checkDeps();
    });
}

// Parse string of dependencies to object
// Almost no need in this function if data-dependencies were filled with JSON
DependentInput.prototype.parseDeps = function () {
    this.deps = {};
    var self = this,
        data = this.input.getAttribute('data-dependencies');
    if (data) {
        data.split(';').forEach(function (d) {
            d = d.split('=');
            self.deps[d[0]] = d[1] || '';
        });
    }
}

// Check the state of fields we depend on
// Dependencies can be strict, when exact match of value is required
// Or soft, in which case any non-empty value is accepted
DependentInput.prototype.checkDeps = function () {
    var active = true;
    for (var d in this.deps) {
        active &= (this.deps[d] == '') ? (!!this.form[d].value) : (this.deps[d] == this.form[d].value);
    }
    this.input.disabled = !active;
}

// Initialize form fields
var inputs = document.querySelectorAll('[data-dependencies]');
Array.prototype.slice.call(inputs).forEach(function (i) {
    new DependentInput(i, i.form);
});
&#13;
input,
select {
	display: block;
	width: 300px;
	margin-bottom: 1em;
}

input:disabled,
select:disabled {
	outline: 2px solid tomato;
}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

不确定.valueOf()是否有效,因为它来自Object原型。尝试:

rdd.value.indexOf('ClaimsBySupplier') > -1

剩下的对我来说很好。

答案 2 :(得分:0)

这只是简单的if else声明
如果rdd不是&#34; ClaimsBySupplier&#34;

,也许你可以认为保持禁用

&#13;
&#13;
function valueChanged() {
var rdd = document.getElementById("ReportDD");
var sdd = document.getElementById("SuppNameDD");

if (rdd.value == "ClaimsBySupplier") 
{
  sdd.disabled = false;
}
else
{
sdd.disabled = true;
}

//if (rdd.value.indexOf('ClaimsBySupplier') > -1) sdd.disabled = false;
};
&#13;
<content id="GenerateReportContent" class="col-md-4">
            <form id="GenerateReportContainer">
                <div class="AltFunctions">
                    <ul>
                        <li>
                            <a href="#" class="AltButton" id="altClearButton">Clear</a>
                        </li>
                        <li>
                            <a href="#" class="AltButton" id="GRaltInfoButton">Info</a>
                        </li>
                    </ul>
                </div>

                <h1 id="GenerateReportHeader">GENERATE REPORT</h1>
                <input type="text" id="txtGRC" class="form-control" placeholder="Enter Specific Claim Number...." >
                <p id="txtOptional">(optional)</p>
                <select class="GRDropDown" id="ReportDD" onchange="valueChanged()">
                    <option value="SelectReport">Select Report</option>
                    <option value="ClaimsBySupplier">Claims By Supplier</option>
                    <option value="ClaimsByDepartment">Claims By Department</option>
                    <option value="ReasonCodeBreakdown">Reason code breakdown</option>
                    <option value="MonthlyDebitingReport">Monthly Debiting Report</option>
                </select>
                <br />
                <select class="GRDropDown" id="SuppNameDD" disabled>
                    <option value="SelectSupplierName">Select Supplier Name</option>
                </select>
                <br />
                <select class="GRDropDown" id="ReviewPeriodDD" disabled>
                    <option value="SelectReviewPeriod">Select Review Period</option>
                </select>
                <div class="form-group">
                    <input type="text" id="txtGRC" class="form-control" placeholder="Month Code..." disabled="disabled">
                    <p id="txtOptional">(optional)</p>

                </div>
                <button type="submit" id="GenerateReportButton" class="btn btn-default">GO</button>
            </form>
        </content>
&#13;
&#13;
&#13;

希望这有帮助...

答案 3 :(得分:0)

 $(document).ready(function () {            
            $('#ReportDD').change(function () {
                if ($(this).val() == "ClaimsBySupplier") {
                    $('#SuppNameDD').removeAttr('disabled');
                    $('#ReviewPeriodDD').removeAttr('disabled');
                }
                else if ($(this).val() == "ClaimsByDepartment") {
                    $('#SuppNameDD').removeAttr('disabled');
                    $('#ReviewPeriodDD').removeAttr('disabled');
                }
                else if ($(this).val() == "ReasonCodeBreakdown") {
                    $('#SuppNameDD').removeAttr('disabled');
                    $('#ReviewPeriodDD').removeAttr('disabled');
                }
                else if ($(this).val() == "MonthlyDebitingReport") {
                    $('#ReviewPeriodDD').removeAttr('disabled');
                    $('#txtGRC').removeAttr('disabled');
                }
            });
        });

询问一些同事和他们的帮助。这是JQuery的做法。我没有机会使用ntaloventi的答案,所以我无法确认它是否正确。