正確使用select和js在一起？

Question

我想用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> 

Answer 1

我建議，要處理的總和，改變了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 。

參考文獻：

• jQuery.trim()。
• map()。
• :selected selector。
• :visible selector。

Answer 2

你的選擇是錯誤的點擊處理程序中的「不擁有者」順便說一句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