.change() 隐藏 <选择> .click() .show() <选择>

Question

我想在选择一个选项后隐藏一个选择框并将值作为文本放置到位。这就是工作。接下来我需要的是，能够单击文本并再次显示选择框。现在不行。

有人知道该怎么做吗？？？请？ :-D

<a>
  <select class="trigger">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
  </select>
</a> 
<a>
  <select class="trigger">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
  </select>
</a>

<script>
$('.trigger').change( function() {
    var $tt = $(this).val();
    $(this).hide();
    $(this).parent("a").text($tt);
});
</script>

Answer 1

$(function () {
    $('.trigger').change(function () {
        var $tt = $(this).val();
        $(this).hide();
        // Don't use .text(), that will replace the <select> with the text
        $(this).parent("a").append($("<span/>", {
            text: $tt
        }));
    });
    $("a").click(function () {
        // If the select is hidden ...
        var $select = $(".trigger:hidden", $(this));
        if ($select.length) {
            // Remove the text field ...
            $("span", $(this)).remove();
            // and show the select
            $select.show();
        }
    });
});

FIDDLE

Answer 2

以下是一个简单的解决方案（http://jsfiddle.net/h7ynd/）：

HTML

<a>
  <select id="trigger1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
  </select>

</a>
 <span id="label1"></span>

<a>
  <select id="trigger2">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
  </select>
   <span id="label2"></span>
</a>

jQuery

$('#trigger1').change(function () {
    var $tt = $(this).val();
    $('#label1').text($tt )
    $(this).hide();
});
$('#label1').click(function () {
    $("#trigger1").show();
    $(this).text("");
});

$('#trigger2').change(function () {
    var $tt = $(this).val();
    $('#label2').text($tt )
    $(this).hide();
});
$('#label2').click(function () {
    $("#trigger2").show();
    $(this).text("");
});

可以修改选择器以使用类而不是 id。

Answer 3

我建议：

$('select').change(function () {
    var self = $(this);
    self.addClass('edited').next('span').text(self.val());
});

$('#optionList span').click(function () {
    $(this).prev('select').removeClass('edited').focus();
});

使用以下 CSS：

select.edited,
select + span {
    display: none;
}

#optionList select.edited + span {
    display: inline-block;
}

和 HTML（根据需要更改）：

<ul id="optionList">
    <li>
        <select name="one">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
            <option>Four</option>
        </select> <span></span>

    </li>
</ul>

JS Fiddle demo.

不过，您可以将 CSS 用于大部分功能：

<ul id="optionList">
    <li>
        <select name="one">
            <option>One</option>
            <option>Two</option>
            <option>Three</option>
            <option>Four</option>
        </select><span></span>

    </li>
</ul>

使用 CSS：

select {
    border: 0 none transparent;
    cursor: pointer;
    -webkit-appearance: none;
}

select:focus + span::after {
    color: #000;
}

span::after {
    color: #999;
    content:'\25bc'; /* unicode down-pointing arrow: '▼' */
}

JS Fiddle demo.

参考资料：

• addClass()。
• focus()。
• next()。
• prev()。
• removeClass()。
• text()。

Answer 4

试试：

$(document).ready(function(){
    $('option').click(function(){
      var value = $(this).attr('value');
      $(this).parents('a').html(value);
    });
  });

编辑：我认为您的问题实际上可能是您没有将 jQuery 包装在 doc 中准备好了吗？我已将其添加进去，但我认为您的原始方法可能适用于准备好的文档。

Answer 5

使用text() 或html() 将替换父锚点的内容，完全删除选择下拉菜单，而您真正想做的只是隐藏它：

$('.trigger').on('change', function() {
    var elem = $(this),
        txt  = $('<span />', {text: this.value});

    elem.hide().before(txt);
    txt.on('click', function() {
        elem.show();
        $(this).remove();
    });
});

FIDDLE