正确使用select和js

correct use of select and js together?

本文关键字：js select      更新时间：2023-09-26

我正在尝试使用select为用户提供两个选项。1个选项为所有者，另一个选项为非所有者。我希望能够问他们不同的问题，无论他们是否是所有者。我希望他们能够输入数字1-10的答案，并根据答案给他们反馈。如果可以的话，我会尽量把它说得非常清楚。一个问题有两个选项。当它被选中时，所有者或非所有者的问题会被问到，并被添加到我有一把小提琴。我到处都是，不知道，不要介意我。如果有人能给我看那些作品，那就太好了！！！改变其中的任何内容，只想让它发挥作用。http://jsfiddle.net/philyphil/CcVsz/11/

<select class="myOptions">
<option data-val="" selected>Pick an option</option>
<option data-val="owner">Owner</option>
<option data-val="not-owner">Not Owner</option>
</select>

我建议，为了处理求和，将jQuery更改为：

$('#butt').click(function () {
    /* this gets an array of the numbers contained within visible
       input elements */
    var nums = $('.list input:visible').map(function () {
        return parseInt(this.value, 10);
    }),
    // initialises the total variable:
        total = 0;
    /* iterates over the numbers contained within the array,
       adding them to the 'total' */
    for (var i = 0, len = nums.length; i < len; i++) {
        total += nums[i];
    }
    var msg = '';
    if (isNaN(total)) {
        msg = 'Input three numbers, please...';
    } else if (total < 30) {
        msg = "That's bad, should be higher...";
    } else if (total > 40) {
        msg = "That's bad, should be lower...";
    } else {
        msg = "You got it... Nice work.";
    }

    $('#output').text(msg);
});

并且也不使用id属性来选择要求和的元素，而是使用class-名称：

<div class="list owner">
    <p>a</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <p>b</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <p>c</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <!-- questions for owners -->
</div>
<div class="list not-owner">
    <p>x</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <p>y</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <p>z</p>
    <input class="numbers" type="text" size="2" />
    <br/>
    <!-- questions for non-owners -->
</div>

JS Fiddle演示。

测试某人是否是或说他们是所有者：

var total = 0,
    isOwner = $.trim($('.myOptions option:selected').val()) === 'owner';
if (isOwner) {
    console.log("It's the owner");
}

上述jQuery耦合到select元素，其中option元素具有值：

<select class="myOptions">
    <option value="-1" data-val="" selected>Pick an option</option>
    <option value="owner" data-val="owner">Owner</option>
    <option value="not-owner" data-val="not-owner">Not Owner</option>
</select>

JS Fiddle演示。

参考文献：

  • jQuery.trim()
  • map()
  • :selected选择器
  • :visible选择器

您的选择器在点击处理程序中错误，因为"非所有者"btw ID在上下文页面上必须是唯一的。最好的方法是使用类而不是ID，并检查可见框：

$('.myOptions').change(function(){
  $('.list').removeClass('active')
  .filter('.' + $('.myOptions').children('option:selected').attr('data-val'))
  .addClass('active');
});
/* want to say if owner do this 
when I un-comment this it breaks
var qbc = $('#owner')
var c = $('#myOptions')
if $(c == qbc){
    prompt("worked!!!!")
}
*/

$('#butt').click(function () {
    var $boxOne = $('.box:visible').eq(0);
var k1 = parseInt($boxOne.val(), 10);
var $boxTwo = $('.box:visible').eq(1);
    var k2 = parseInt($boxTwo.val(), 10);
    var $boxThree = $('.box:visible').eq(2);
    var k3 = parseInt($boxThree.val(), 10);

    var total = k1 + k2 + k3;
    var msg = '';
    if (isNaN(total)) {
        msg = 'Input three numbers, please...';
    } else if (total < 30) {
        msg = "That's bad, should be higher...";
    } else if (total > 40) {
        msg = "That's bad, should be lower...";
    } else {
        msg = "You got it... Nice work.";
    }

    $('#output').text(msg);   
});
/* else i will change question number and do same thing */

演示

相关文章：