动态表单Javascript下拉列表/输入

时间:2015-05-31 13:03:58

标签: javascript jquery

我正在为我的众筹平台使用一个插件,这个平台工作正常并且帮助了我很多,因为我对编码还不是很舒服。

但是,我想调整一个JavaScript函数。当顾客选择他想贡献多少时,顾客可以决定他想要的金额或奖励水平

以下基本上是如何制作表格的:

<form action="" method="POST">
<div class="form-row inline left twothird">
    <label for="level_select">Contribution Level
        <span class="dropdown ">
            <select name="level_select" class="dropdown__select">
                <option value="1" data-price="5.00">Reward 1</option>
                <option value="1" data-price="15.00">Reward 2</option>
                <option value="1" data-price="25.00">Reward 3</option>
        </span>
    </label>
</div>
<div class="form-row inline third total">
    <label for="total">Total</label>
    <input type="text" class="total" name="total" id="total" value="">
</div>
<div class="form-row submit">
    <input type="submit">
</div>

从那里我想用自己输入的金额绑定等级。 目前,它部分工作,因为根据所选级别更改数量非常容易。我遇到的问题是根据输入更改所选选项。

在插件中,我发现以下几行似乎是我感兴趣的:

    jQuery(document).bind('price_change', function(event, price) {
    jQuery('input[name="total"]').val(price);
    var levelIndex = jQuery('select[name="level_select"]').prop('selectedIndex');
    var levelPrice = jQuery('select[name="level_select"] option').eq(levelIndex).data('price');
    if (price < levelPrice) {
        jQuery('input[name="total"]').val(levelPrice);
    }
});

基于此,我开始稍微调整一下,但由于我对jQuery的了解很少,这就是我现在所处的位置:

jQuery(document).ready(function() {
jQuery(document).bind('price_change', function(event, price) {
    var price = jQuery('input.total').val();
    var levelIndex = jQuery('select[name="level_select"]').prop('selectedIndex');
    var levelPrice = jQuery('select[name="level_select"] option').eq(levelIndex).data('price');
    var nextLevel = jQuery('select[name="level_select"] option').eq(levelIndex + 1);//got to check if exist, else NULL
    if (nextLevel){var nextLevelPrice = jQuery('select[name="level_select"] option').eq(levelIndex + 1).data('price');}
    var prevLevel = jQuery('select[name="level_select"] option').eq(levelIndex - 1);//got to check if exist, else NULL
    if (prevLevel){var prevLevelPrice = jQuery('select[name="level_select"] option').eq(levelIndex - 1).data('price');}
    while (prevLevel!=NULL && price < levelPrice) {
        jQuery('input[name="total"]').val(prevLevel);
    }
    while (nextLevel != NULL && price < nextLevelPrice){
        jQuery('input[name="total"]').val(nextLevel);
    }
});

我是在正确的轨道上还是他们更容易进行?

感谢您的关注,感谢任何建议

0 个答案:

没有答案