正确使用select和js在一起?

时间:2013-06-29 08:04:21

标签: javascript jquery html

我正在尝试使用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>

2 个答案:

答案 0 :(得分:0)

您的选择器在“非所有者”的点击处理程序中是错误的。在上下文页面上,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 */

DEMO

答案 1 :(得分:0)

我建议,要处理总结,将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 demo

要测试某人是否,或者说是否是所有者:

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 demo

参考文献: