javascript - Jquery获取所选选项下拉列表的文本

标签 javascript jquery html

我有一个 HTML 表单,我正在循环一些数字输入字段值以在页面底部显示总计。

我需要获取最近的下拉菜单的文本值(不是选项值)。

我的 HTML 如下:

<div class="standard-row wsheet-row input-row" id="5438">
    <label class="ib">
        <span class="label-stacked">Category</span>
        <select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
            <option value="5438">NON LABOUR</option>
        </select>
    </label>
    <label class="ib">
        <span class="label-stacked">Total</span>
        <input class="inp inp110 data-addup-total inp-calculate" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="0.00" type="text">
    </label>
</div>
<div class="standard-row wsheet-row input-row" id="5240">
    <label class="ib">
        <span class="label-stacked">Category</span>
        <select class="inp inp220 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][sub_category][]" name="sub_category">
            <option value="5240">1ST FIX CYLINDER</option>
        </select>
    </label>
    <label class="ib"> 
        <span class="label-stacked">Price</span>
        <input class="inp inp110 inp-disabled" readonly="" data-myname="worksheet[*][plots][!][price][]" name="price" value="£40.00" type="text">
    </label>
    <label class="ib"> 
        <span class="label-stacked">Number</span>
        <input class="inp inp55 inp-calculate" data-myname="worksheet[*][plots][!][number_units][]" name="number_units" value="" type="text">
    </label>
    <label class="ib">
        <span class="label-stacked">Total</span>
        <input class="inp inp110 inp-disabled data-addup-total" readonly="" data-myname="worksheet[*][plots][!][total_cost][]" name="total_cost" value="£0.00" type="text">
    </label>
</div>
<div class="wsheet-labour-total">LABOUR: £4.00</div>
<div class="wsheet-nonlabour-total">NON LABOUR: £4.00</div>
<div class="wsheet-final-total">TOTAL CLAIM: £4.00</div>

我用来尝试在选择之前获取选择的 Jquery:

$(parentRow).find('.data-addup-total').each(function() {
    // get closest sub_category
    var subCategory = $(this).closest('.inp220 option:selected').prev().text();
    alert(subCategory);

    price = $(this).val().replace(/[^\d.-]/g, '');
    numtotal += parseFloat(price);
});

如果我进行控制台,我会得到:

Object { length: 0, prevObject: Object, context: <input.inp.inp110.data-addup-total.inp-calculate> } worksheet.js:158:1
Object { length: 0, prevObject: Object, context: <input.inp.inp110.inp-disabled.data-addup-total> } worksheet.js:158:1
Object { length: 0, prevObject: Object, context: <input.inp.inp110.data-addup-total.inp-calculate> } worksheet.js:158:1
Object { length: 0, prevObject: Object, context: <input.inp.inp110.inp-disabled.data-addup-total> } worksheet.js:158:1

最佳答案

DEMO

$('.data-addup-total').each(function () {
    // get closest sub_category
    var subCategory = $(this).parent().siblings().find('.inp220 option:selected').text();
    alert(subCategory);
});

试试这个

关于javascript - Jquery获取所选选项下拉列表的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33648854/

相关文章:

java - css img :hover working, img:active 不是

php - 如何屏蔽 IE8 及以下版本?

javascript - 寻找显示 block /无和动画的变化

javascript - 您在什么阶段压缩/最小化 javascript?

php - 如何在提交表单时排除某些表单字段而不禁用该字段

javascript - 如何强制移动浏览器为输入类型 ="text"拉出数字键盘?

javascript - jQuery 无法选择动态创建的 html 元素

jquery - 使用 jQuery 自动编号标题 H1-H6

html - 当 background-size 设置为包含时,图像显示得更小并且不会拉伸(stretch)

html - Firefox 和 IE - Firefox 处理表内的 <span>(html 和 css)