多选元素和样式选定选项

时间:2016-03-25 10:06:29

标签: javascript html css

我有多重选择元素呈现为

<button class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" type="button" style=" title="None selected">
<span class="multiselect-selected-text">None selected</span>
<b class="caret"></b>
</button>

默认情况下渲染时,您可以看到已设置None selected标题。在选择动作时,这将改变所选元素的标题。

  

我的问题是:如何使用css target None selected和   跟随caret成为font-color: gray;,如果是其他内容则是font-color   选择将black更改为 if ($(".multiselect-selected-text:contains('xxxxxx')")) { alert('a'); } else { alert('b'); } 例如?

更新: 我尝试使用:包含像建议的选择器,在这个非常简单的场景中,我总是如此(警告a)

 BOMResponse bomResponse = new BOMResponse();
        TextView temperature  = (TextView)findViewById(R.id.temperature);
        temperature.setText(String.format("%d", bomResponse.getObservations().getData().get(0).getAirTemp().toString()));

1 个答案:

答案 0 :(得分:1)

您可以使用Jquery中的:contains选择器来实现此目的。试试这个

<RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/Overlay_linearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<ScrollView
    android:id="@+id/Overlay_scrollView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/skip">

    <TableLayout
        android:id="@+id/Overlay_tableLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:weightSum="1.0">

        <TableRow android:padding="10dp">

            <ImageView
                android:layout_width="0px"
                android:layout_height="80dp"
                android:layout_weight="0.3"
                android:src="@drawable/img_0" />

            <TextView
                android:id="@+id/MapOverlay_textView0"
                android:layout_width="0px"
                android:layout_weight="0.7"
                android:text="@string/overlay_instruction0" />
        </TableRow>

        <TableRow android:padding="10dp">

            <ImageView
                android:layout_width="0px"
                android:layout_height="80dp"
                android:layout_weight="0.3"
                android:src="@drawable/img_1" />

            <TextView
                android:id="@+id/MapOverlay_textView1"
                android:layout_width="0px"
                android:layout_weight="0.7"
                android:text="@string/overlay_instruction1" />
        </TableRow>

        <TableRow android:padding="10dp">

            <ImageView
                android:layout_width="0px"
                android:layout_height="80dp"
                android:layout_weight="0.3"
                android:src="@drawable/img_2" />

            <TextView
                android:id="@+id/MapOverlay_textView2"
                android:layout_width="0px"
                android:layout_weight="0.7"
                android:text="@string/overlay_instruction2" />
        </TableRow>

        <TableRow android:padding="10dp">

            <ImageView
                android:layout_width="0px"
                android:layout_height="80dp"
                android:layout_weight="0.3"
                android:src="@drawable/img_3" />

            <TextView
                android:id="@+id/MapOverlay_textView3"
                style="@android:style/TextAppearance.Medium"
                android:layout_width="0px"
                android:layout_weight="0.7"
                android:text="@string/overlay_instruction3" />
        </TableRow>

    </TableLayout>
</ScrollView>

<CheckBox
    android:id="@+id/skip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:text="Don't show this again" />

Css规则

 $('.multiselect-selected-text:contains("None selected")').parent().addClass('grayOut');

<强> Working Fiddle

和ofcource一样,你需要在multiselect插件的change事件上执行上面的脚本。