Question

我有一个javascript脚本，它会查找值和下拉列表，并根据值来更改下一个下拉菜单，但是这对我来说不再适用，因为我需要将值传递给ruby，所以我可以将它保存在会话中。

$(document).ready(function() {
    $('#Exposures').bind('change', function() {
        var elements = $('div.exposures').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if something is selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');
    
    $('.second-level-select').bind('change', function() {
        var elements = $('div.second-level-container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if something is selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="pmmargin3 exp" size="1" id="Exposures" title="" name="exposures_pt1">
    <option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
    <option value="1">thing1</option>
    <option value="1">thing2</option>
    <option value="2">thing3</option>
    <option value="1">thing4</option>
    <option value="3">thing5</option>
 
    </select>

    <div class="container exposures leftmargin exp">
    <div class="1">
        <select class="second-level-select" name="exposures_pt2a">
            <option selected disabled hidden style='display:none' value=''>-     Please select an option-</option>
            <option value="guardrail_system">thing1</option>
            <option value="personal_fall">thing2</option>
            <option value="safety_net">thing3</option>
        </select>
    </div>
    <div class="2">
        <select class="second-level-select" name="exposures_pt2b">
            <option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
            <option value="guardrail_system">thing1</option>
            <option value="personal_fall">thing2</option>
            <option value="safety_net">thing3</option>
            <option value="infeasibility_option">thing4</option>
        </select>
    </div>
    <div class="3">
        <select class="second-level-select" name="exposures_pt2c">
            <option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
            <option value="current_subpart">thing5</option>
            <option value="proposed_subpart">thing6</option>
        </select>
    </div>
  </div>

感谢您的帮助，我对Javascript很新，我正在努力，但仍需要一些指导。

Answer 1

根据我的理解。您希望将在第一个下拉列表中选择的数据发送到ruby以将其保存在Session中。如果是这种情况，在每个选择中，您都可以使用cookie触发AJAX调用并相应地更新会话对象，并随后在第二个下拉列表中显示它。

尽管onChange AJAX不是一个非常好的建议，但在这种情况下，您可以将所选选项保存到浏览器sessionStorage中，然后在选择（下拉）周期结束时通过单个ajax将其添加到服务器。

Answer 2

好吧，我想出了如何获取我的结果并保持我的代码中的值相同，所以没有其他的方法在这里打破我是如何做到的。

$(document).ready(function() {
$('#Exposures').bind('change', function() {
    var elements = $('div.exposures').children().hide(); // hide all the elements
    var value = $(this).val();
    *added* var exposuredd = document.getElementById("Exposures");
    *added*  var selectedText = exposuredd.options[exposuredd.selectedIndex].text;
 *added*   document.getElementById("exp1").innerHTML="<input type='text' name='exposures_pt1' value='"+selectedText+"' >";

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');

$('.second-level-select').bind('change', function() {
    var elements = $('div.second-level-container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');

});

这需要在erb中使用

<p hidden  id="exp1"></p>

所以现在我可以将我的选项中的任何文字传递给ruby，例如....“嘿，我在这里”

 <option value="1">Hey Here I am</option>

如何让我的javascript寻找类或val之外的任何东西

2 个答案: