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

使用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

Answer 2

我建议：

$('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

参考文献：

Answer 3

尝试：

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

编辑：我认为你的问题可能实际上是你没有准备好你的jQuery吗？我已经添加了，但我认为您的原始方法可能适用于doc。

Answer 4

$(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 5

以下是一个简单的解决方案（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。

.change（）隐藏<select> .click（）。show（）</select>

5 个答案: